May 18, 2011, 5:10 PM
[CLOSED] Layout School Part I: GridPanels inside a TabPanel inside a ViewPort
So after a longer discussion about how to layout things in ext.net I got this example from Daniil that in parts explained/showed a way to layout a certain thing.
That example looks like this image; it resizes everything (the TopBars, the GridPanels).
However, lets say I really want a TabPanel with two TabPages, and in each of those TabPages I want to have one or more GridPanels? The code below is a runnable example of that. Its a copy of Daniils example with the difference that I inside the <ViewPort><Items> instead but the TabPanel, create two Panels (the tabPages) and then place two GridPanels on each. Looks like this:
As you can see it doesnt auto adjust the height in the gridpanels anymore - only one row. If I then set AutoHeight="true" on the top GridPanel it expands to show all rows, but the second GridPanel disappears completely (ie height becomes like 0 px).
If I set AutoHeight="true" on the bottom GridPanel then nothing happens - both GridPanels only show one row.
If you resize the window, the TabPanel seems to be resized but the GridPanels does not follow. Neither MonitorResize nor AutoWidth helps. Flex="1" doesnt seem to matter at all?
I have played around with setting different Layouts on the (tab)Panels, to no avail.
So, the first organized "layout school" post from my side ;-) What do you suggest?
Here is the runnable example:
That example looks like this image; it resizes everything (the TopBars, the GridPanels).
However, lets say I really want a TabPanel with two TabPages, and in each of those TabPages I want to have one or more GridPanels? The code below is a runnable example of that. Its a copy of Daniils example with the difference that I inside the <ViewPort><Items> instead but the TabPanel, create two Panels (the tabPages) and then place two GridPanels on each. Looks like this:
As you can see it doesnt auto adjust the height in the gridpanels anymore - only one row. If I then set AutoHeight="true" on the top GridPanel it expands to show all rows, but the second GridPanel disappears completely (ie height becomes like 0 px).
If I set AutoHeight="true" on the bottom GridPanel then nothing happens - both GridPanels only show one row.
If you resize the window, the TabPanel seems to be resized but the GridPanels does not follow. Neither MonitorResize nor AutoWidth helps. Flex="1" doesnt seem to matter at all?
I have played around with setting different Layouts on the (tab)Panels, to no avail.
So, the first organized "layout school" post from my side ;-) What do you suggest?
Here is the runnable example:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { "test11", "test12", "test13" },
new object[] { "test12", "test22", "test23" },
new object[] { "test13", "test32", "test33" }
};
this.Store1.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ext.Net Example</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
<ext:RecordField Name="test3" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:TabPanel runat="server">
<Items>
<ext:Panel runat="server" Title="Panel 1">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Flex="1">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:DisplayField ID="DisplayField1" runat="server" Text="Hello!" />
<ext:Button ID="Button1" runat="server" Text="Button" StandOut="true" />
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" ForceFit="true" />
</View>
</ext:GridPanel>
<ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store1" Flex="1">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:DisplayField ID="DisplayField2" runat="server" Text="Hello!" />
<ext:Button ID="Button2" runat="server" Text="Button" StandOut="true" />
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView2" runat="server" ForceFit="true" />
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel ID="Panel1" runat="server" Title="Panel 2">
<Items>
<ext:GridPanel ID="GridPanel3" runat="server" StoreID="Store1" Flex="1">
<TopBar>
<ext:Toolbar ID="Toolbar3" runat="server">
<Items>
<ext:DisplayField ID="DisplayField3" runat="server" Text="Hello!" />
<ext:Button ID="Button3" runat="server" Text="Button" StandOut="true" />
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel3" runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView3" runat="server" ForceFit="true" />
</View>
</ext:GridPanel>
<ext:GridPanel ID="GridPanel4" runat="server" StoreID="Store1" Flex="1">
<TopBar>
<ext:Toolbar ID="Toolbar4" runat="server">
<Items>
<ext:DisplayField ID="DisplayField4" runat="server" Text="Hello!" />
<ext:Button ID="Button4" runat="server" Text="Button" StandOut="true" />
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel4" runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column Header="Test3" DataIndex="test3" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView4" runat="server" ForceFit="true" />
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; May 21, 2011 at 11:03 AM.
Reason: [CLOSED]