[CLOSED] Scolling GridPanel and not the container

  1. #1

    [CLOSED] Scolling GridPanel and not the container

    I have a grid inside of a panel with a toolbar. Is there anyway to scroll the gridpanel contents instead of the entire page? In my example I would expect to see my toolbar stay fixed at the top of the page.

    <%@ Page Language="vb" %>
    
    <script runat="server">
    
        Public Class Data
            Property ID As Integer
            Property Name As String
            Property Description As String
        End Class
    
        <DirectMethod()>
        Protected Sub btnRefresh_Click(sender As Object, e As DirectEventArgs)
    
        End Sub
        Private Function getData() As List(Of Data)
            Dim retval As New List(Of Data)
    
            For i As Integer = 1 To 100
                retval.Add(New Data With {.ID = i, .Name = i.ToString, .Description = "testing " + i.ToString})
            Next
    
            Return retval
        End Function
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack AndAlso Not Ext.Net.X.IsAjaxRequest Then
                StoreModelHoldings.DataSource = getData()
                StoreModelHoldings.DataBind()
            End If
    
        End Sub
    
     </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    
        <title>Adhesion Manager Portal</title>
      
    </head>
    <body>
        <form id="form1" runat="server">
    
            <ext:ResourceManager ID="ResourceManagerControl" runat="server" />
    
            <script type="text/javascript">
                Ext.data.Connection.override({
                    timeout: 120000
                });
                Ext.Ajax.timeout = 120000;
                Ext.net.DirectEvent.timeout = 120000;
            </script>
    
            <ext:XScript ID="XScript1" runat="server">
                <script type="text/javascript"> 
                   Ext.EventManager.onWindowResize(function (w, h) {
                      #{OuterPanel}.doLayout(true);
                   });
                </script>
            </ext:XScript>
    
                    <ext:Panel ID="OuterPanel" Flex="1" runat="server" layout="FitLayout">
                        <Items>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:TextField runat="server" ID="notifyOnExit" hidden="true"></ext:TextField>
                                    <ext:Button ID="btnDonut" runat="server" Icon="ChartPie" ToolTip="Allocation Chart">
                                    </ext:Button>
                                    <ext:Label runat="server" Text="Weight:" StyleSpec="padding-top:2px"></ext:Label>
                                    <ext:Label runat="server" ID="lblTotalWeight" Text="0.00%" StyleSpec="padding-top:2px"></ext:Label>
                                    <ext:ToolbarSeparator runat="server" ></ext:ToolbarSeparator>
                                    <ext:Label runat="server" ID="lblModelState" ></ext:Label>
                                    <ext:ToolbarFill runat="server"></ext:ToolbarFill>
                                    <ext:Button
                                        ID="btnEditModel"
                                        runat="server"
                                        Text="Edit"
                                        Icon="ApplicationEdit">
                                    </ext:Button>
    
                                </Items>
                            </ext:Toolbar>
                            <ext:GridPanel ID="GridPanel1" runat="server" Icon="Report" Layout="FitLayout" AutoScroll="True" > 
                                    <Store>
                                        <ext:Store ID="StoreModelHoldings" runat="server">
                                            <Model>
                                                <ext:Model runat="server" ID="modelModels" IDProperty="ID">
                                                    <Fields>
                                                        <ext:ModelField Name="ID"></ext:ModelField>
                                                        <ext:ModelField Name="Description"></ext:ModelField>
                                                        <ext:ModelField Name="Name"></ext:ModelField>
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <ColumnModel>
                                        <Columns>
                                            <ext:Column runat="Server" Flex="1" Text="Description" DataIndex="Description">
                                            </ext:Column>
                                            <ext:Column runat="Server" Text="Status" DataIndex="ID"></ext:Column>
                                            <ext:Column runat="Server" Text="Type" DataIndex="Name"></ext:Column>
                                        </Columns>
                                    </ColumnModel>
                            </ext:GridPanel>
    
                        </Items>
                    </ext:Panel>
    
           </form>
    
        </body>
      </html>
    Last edited by fabricio.murta; May 04, 2017 at 7:53 PM.
  2. #2
    Hello @rmelancon!

    The main issue on your approach is because you are using a panel with FitLayout and adding more than one items to the panel. If you have the FitLayout, it is meant to "fit" only the first component in the items to the container. For fitting more than one items there are the VBox and HBox layouts, for example.

    But also you defined a panel's toolbar as one of the panel's items. That's another sight of dragons ahead. Add the toolbar to the panel's TopBar, then you will have the toolbar as proper toolbar.

    But that's not all. In your test case I understand you want to make the outer "shell" fit the screen. There's no better way of making a page fit the screen other than using a ViewPort. But chances are this will work for your test case (where you want the grid "maximized"), but not for your real life case (where the panel could be but a part of the whole page).

    Before I show you the fixed part of the test case, I must ensure you don't try to use ViewPort around the pages inside other components. It won't work. Viewport is but a container to get the shape of the whole browser screen. It is effectively a component to represent the client's view port (browser's viewable area). So, say, if you have a master page with a container outside, using a ViewPort on the slave pages is not going to work well. Otherwise, usually people have a viewport as master page to make every slave of that page "fit to screen".

    With that explained, if ViewPort is not what you want, just replace it to any other container which, in turn would have something external to it (like a window with fixed width/height, maybe -- the window itself can be the replacement to the viewport, just give it the FitLayout) to determine the container's boundaries.

    Alright, history telled, here's the working solution with the ViewPort approach (that "maximizes" the outer panel):

    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:Panel ID="OuterPanel" Flex="1" runat="server" Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:TextField runat="server" ID="notifyOnExit" hidden="true"></ext:TextField>
                            <ext:Button ID="btnDonut" runat="server" Icon="ChartPie" ToolTip="Allocation Chart">
                            </ext:Button>
                            <ext:Label runat="server" Text="Weight:" StyleSpec="padding-top:2px"></ext:Label>
                            <ext:Label runat="server" ID="lblTotalWeight" Text="0.00%" StyleSpec="padding-top:2px"></ext:Label>
                            <ext:ToolbarSeparator runat="server" ></ext:ToolbarSeparator>
                            <ext:Label runat="server" ID="lblModelState" ></ext:Label>
                            <ext:ToolbarFill runat="server"></ext:ToolbarFill>
                            <ext:Button
                                ID="btnEditModel"
                                runat="server"
                                Text="Edit"
                                Icon="ApplicationEdit">
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" Icon="Report" AutoScroll="True" > 
                            <Store>
                                <ext:Store ID="StoreModelHoldings" runat="server">
                                    <Model>
                                        <ext:Model runat="server" ID="modelModels" IDProperty="ID">
                                            <Fields>
                                                <ext:ModelField Name="ID"></ext:ModelField>
                                                <ext:ModelField Name="Description"></ext:ModelField>
                                                <ext:ModelField Name="Name"></ext:ModelField>
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column runat="Server" Flex="1" Text="Description" DataIndex="Description">
                                    </ext:Column>
                                    <ext:Column runat="Server" Text="Status" DataIndex="ID"></ext:Column>
                                    <ext:Column runat="Server" Text="Type" DataIndex="Name"></ext:Column>
                                </Columns>
                            </ColumnModel>
                    </ext:GridPanel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    I hope this helps!.. Don't like the ViewPort? Just remove it and give your panel a width/height and you'll see the inner GridPanel still obeying the outer panel's boundaries.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Great information, thanks! Got it all working now, put a ViewPort in the master and fixed the toolbars etc. Thanks again.
  4. #4
    Hello @rmelancon!

    Glad it helped and thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 7
    Last Post: Dec 02, 2016, 3:25 PM
  2. Replies: 3
    Last Post: Oct 10, 2016, 9:46 PM
  3. Replies: 3
    Last Post: Oct 23, 2013, 4:30 PM
  4. Replies: 0
    Last Post: May 21, 2012, 3:02 AM
  5. Replies: 1
    Last Post: May 01, 2011, 10:13 PM

Posting Permissions