PDA

View Full Version : [CLOSED] Scolling GridPanel and not the container



rmelancon
May 03, 2017, 7:43 PM
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>

fabricio.murta
May 04, 2017, 7:45 AM
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.

rmelancon
May 04, 2017, 2:00 PM
Great information, thanks! Got it all working now, put a ViewPort in the master and fixed the toolbars etc. Thanks again.

fabricio.murta
May 04, 2017, 7:53 PM
Hello @rmelancon!

Glad it helped and thanks for the feedback!