[CLOSED] Viewport --> (Toolbar + Panel) --> (Toolbar + Control)

  1. #1

    [CLOSED] Viewport --> (Toolbar + Panel) --> (Toolbar + Control)

    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
    Last edited by Daniil; Oct 15, 2014 at 3:52 PM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    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 !!
    Attached Thumbnails Menu.png  
    Last edited by Daniil; Oct 14, 2014 at 4:03 PM. Reason: Standalone test case
  4. #4
    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

    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.
  5. #5
    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.
  6. #6
    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.
  7. #7
    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?

    :)
    Last edited by Mario; Oct 15, 2014 at 8:37 AM.
  8. #8
    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/
  9. #9
    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!
  10. #10
    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.

Similar Threads

  1. Replies: 9
    Last Post: Jul 29, 2013, 12:15 PM
  2. [CLOSED] Dynamic toolbar at the top of a viewport
    By PhilG in forum 1.x Premium Help
    Replies: 1
    Last Post: Jan 24, 2012, 12:58 PM
  3. Replies: 1
    Last Post: Mar 07, 2011, 10:39 AM
  4. Replies: 10
    Last Post: Feb 02, 2011, 8:20 PM
  5. Replies: 0
    Last Post: Feb 01, 2010, 6:44 AM

Tags for this Thread

Posting Permissions