PDA

View Full Version : [CLOSED] Viewport --> (Toolbar + Panel) --> (Toolbar + Control)



Mario
Oct 10, 2014, 6:15 AM
I am a new user and I'm testing EXT.NET for my future developments.
I joined the forum but I can not post the questions, then write to you privately.

I'm trying to create a page "Default.aspx" with a top menu.
When I click on a menu item, I would like that the contents of a control "One.ascx", "Two.ascx", etc ... is displayed in a panel just below the menu but occupying all the available height on the page (stretch ???)
In width, however, I would like to do everything on a space of 1000px, with empty space on left and right.
I tried playing with the settings but I not been able to find a solution.

You can help by sending to me an example?
thanks

Daniil
Oct 13, 2014, 3:50 PM
Hi Mario,

Welcome to the Ext.NET forums!

We can start with creating the required layout. For the begging you can put just a static user control on the page.

So, please post the code producing something the closest to what you need.

Mario
Oct 14, 2014, 7:03 AM
Tnx Daniil,
here, the code for simulate my scenario:

======================================

Test.aspx


<%@ Page Language="vb" %>

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim MenuItemPage As New Ext.Net.MenuItem("Page")
AddHandler MenuItemPage.DirectEvents.Click.Event, AddressOf MenuItem_Click

Dim Menu As New Ext.Net.Menu
Menu.Items.Add(MenuItemPage)

Dim ButtonMenu As New Ext.Net.Button
ButtonMenu.PaddingSpec = "0 0 0 0"
ButtonMenu.MenuArrow = False
ButtonMenu.Text = "<table cellpadding='0' cellspacing='0' style='width:100%'><tr><td align='center' valign='top'><img alt='' src='Menu.png' /></td></tr><tr><td align='center'>Menu</td></tr></table>"
ButtonMenu.Width = Unit.Pixel(60)
ButtonMenu.Height = Unit.Pixel(60)
ButtonMenu.Menu.Add(Menu)

ToolbarControl.Items.Add(ButtonMenu)
End Sub

Public Sub MenuItem_Click(sender As Object, e As Ext.Net.DirectEventArgs)
Dim MenuItem As Ext.Net.MenuItem = CType(sender, Ext.Net.MenuItem)
Dim UserControl As New Ext.Net.UserControlLoader

Select Case MenuItem.Text
Case "Page" : UserControl.Path = "Page.ascx"
End Select

PanelApplication.ContentControls.Add(UserControl)
PanelApplication.UpdateContent()
End Sub
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">

<ext:ResourceManager runat="server" />

<ext:Viewport runat="server">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" />
</LayoutConfig>

<Items>
<ext:Panel ID="PanelBanner" runat="server" Width="1000" Height="100" PaddingSpec="5 0 0 0">
<Items>
<ext:Image ID="ImageBanner" runat="server" />
</Items>
</ext:Panel>
</Items>

<Items>
<ext:Panel ID="PanelControl" runat="server" Width="1000" Height="70" PaddingSpec="5 0 0 0">
<Items>
<ext:Toolbar ID="ToolbarControl" runat="server" Border="false" />
</Items>
</ext:Panel>
</Items>

<Items>
<ext:Panel ID="PanelApplication" runat="server" Flex="1" Width="1000" Border="true" PaddingSpec="5 0 5 0" />
</Items>
</ext:Viewport>

</form>
</body>
</html>


NOTE: The Image "Menu.png" is attached.

======================================

Page.ascx


<%@ Control Language="vb" %>

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If (Not Ext.Net.X.IsAjaxRequest) Then
'StoreData.DataSource = DataManager.GetArticoli '---> Return System.Data.DataTable
'StoreData.DataBind()
End If
End Sub
</script>

<ext:Panel runat="server" Border="false">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" ID="PanelSearch" Height="120" Width="1000" Layout="card" ActiveIndex="0" DefaultBorder="true">
</ext:Panel>

<ext:GridPanel runat="server" StateID="GridData">
<Store>
<ext:Store runat="server" ID="StoreData">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Field1" Type="String" />
<ext:ModelField Name="Field2" Type="String" />
<ext:ModelField Name="Field2" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Text Field 1" DataIndex="Field1" />
<ext:Column runat="server" Text="Text Field 2" DataIndex="Field2" />
<ext:Column runat="server" Text="Text Field 3" DataIndex="Field3" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>


======================================

The questions:


1) If you try to start the Page.aspx on Google Chrome you'll see that the button in the Toolbar renders bad the bitmap "Menu.png". In fact, the bitmap is displayed at the bottom and the text of the button "Menu" is not displayed well.
However, if you try to press F12 (development tools) you'll see that the bitmap is displayed correctly!
On Internet Explorer 11 this problem is not there.
How can I solve this problem?
To achieve the same result, instead of using HTML in button text, can I use a better method?


2) Page.aspx must show 3 areas.
- PanelBanner, 100 pixels high.
- PanelControl, 70 pixels high.
- PanelApplication. you must take all the vertical space available.
To do this the "GridPanel" contained in "Page.ascx" must be stretched?
How can I do?


3) The GridPanel must contain the returned data in a DataTable populated by a SQL call.
How can I do it?


Thank you very much !!

Daniil
Oct 14, 2014, 3:26 PM
Thank you for the test case.

I can see I've edited it to get rid of the separate code behind files. Now it is easy to inject to our local projects.



StoreData.DataSource = DataManager.GetArticoli '---> Return System.Data.DataTable

We don't have the DataManager class, so the Exception will be thrown. I've commented it for now. If required, you could replace it with some dummy data.

The general idea is to have a standalone and runnable example, which we can copy, paste and run without any changes. You can find more tips here:
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)


1. ... Menu.png ...

I would recommend this solution.

ButtonMenu.Text = "Menu"
ButtonMenu.IconUrl = "Menu.png"
ButtonMenu.IconAlign = IconAlign.Top
ButtonMenu.Scale = ButtonScale.Large

The Large scale expects the icon 32x32. You might need to adjust the image a bit.


2. ... stretch GridPanel ...

Please:

1. Replace

PanelApplication.ContentControls.Add(UserControl)
with

PanelApplication.Items.Add(UserControl)

2. Set Layout="FitLayout" for the PanelApplication.

3. Set Flex="1" for the GridPanel.

4. Also you might need to update from SVN. We recently (seems, yesterday) have fixed the bug related to UserControlLoader and .UpdateContent()) call.


3) The GridPanel must contain the returned data in a DataTable populated by a SQL call.
How can I do it?

Ideally, please keep one issue per thread. Especially, if the issues are very different. Please start a new forum thread.

Mario
Oct 14, 2014, 5:33 PM
Thank Daniil.



1) Menu.png...
The your solution is fantastic.... very good!



2) Stretch GridPanel...
The your solution not work :(
If I add Layout="FitLayout" to PanelApplication the ASCX control is not loaded (does nothing).
PS: My Premium Account not Work, I can not access the Trunk ... :(



3) DataTable and SQL...
OK... I will create a new thread.

Daniil
Oct 14, 2014, 7:08 PM
If I add Layout="FitLayout" to PanelApplication the ASCX control is not loaded (does nothing).

Have you done other things of my instruction?


PS: My Premium Account not Work, I can not access the Trunk ... :(

The forums and SVN credentials are different. The SVN credentials should be emailed to you then you bought the Premium Support Subscription. Please review the email inbox. Maybe, the spam folder. If there is no such the email, please send a request to support@object.net. Please type your forum name in the request.

Mario
Oct 15, 2014, 6:47 AM
I have:


Replaced PanelApplication.ContentControls.Add(UserControl)
with PanelApplication.Items.Add(UserControl)
Set Layout="FitLayout" for the PanelApplication
Set Flex="1" for the GridPanel
I have downloaded the source code from SVN, but the version of EXT.NET.DLL is too old! (2.2.0.24896)
Must I compile the solution ???


Result: Nothing, the ASCX control is not displayed

-----------------------

I have restored:


PanelApplication.ContentControls.Add(UserControl)
PanelApplication.UpdateContent()


and


<Items>
<ext:Panel ID="PanelApplication" runat="server" Flex="1" Width="1000" Border="true" PaddingSpec="5 0 5 0"/>
</Items>

Result: the ASCX control IS DISPLAYED but the GridPanel not stretched


Have you used my posted code for testing scenario?

:)

Daniil
Oct 15, 2014, 12:33 PM
Have you used my posted code for testing scenario?

Yes, I've tried with your code and it works for me.


I have downloaded the source code from SVN, but the version of EXT.NET.DLL is too old! (2.2.0.24896)
Must I compile the solution ???

Please clarify where is that dll with such the version? There is no Ext.Net.dll in SVN. So, yes, you should download the sources and build the solution.

You should download the sources from this link:
http://svn.ext.net/premium/trunk/

Mario
Oct 15, 2014, 2:02 PM
I found two "EXT.NET.DLL", in:


..\premium\Ext.Net.Examples.MVC\Build\ReferenceAss emblies
..\premium\Ext.Net.Examples\Build\ReferenceAssembl ies


But I have recompiled the solution downloaded from SVN and now it works very well!

Thanks Daniil, even for your patience!

Daniil
Oct 15, 2014, 2:51 PM
Glad to help!

As for those Build folders, they are old and not used anywhere. I've just removed them. So, nobody will be confused by that in the future.

Thank you for pointing out.