May 18, 2011, 7:03 PM
[CLOSED] Layout School Part II: Three items inside ViewPort (with nested items)
So, part II =) Thanks for the answer in Part I, I have based this example on Geoffreys answer in Part I.
In this case I have a ViewPort (Layout="VBoxLayout"). Inside that ViewPort I have three items:
- A Panel that wraps a ComboBox that I want to, as always, resize according to its parent container. Has LayoutConfig specified.
- Another Panel. In my real world code I have here a UserControl that is a Form. In this scaled down example its just a bit of text. Should also extend all the width, and resize but doesnt.
- A GridPanel. Same GridPanel as in Part I that should resize itself with its container. doesnt matter if I wrap it with a Panel or not.
I have tried to "take in" some of the comments that Geoffrey made, but failed to make it work as expected anyways.
I tried to wrap the GridPanel inside a Panel to get it to resize as in the example in Part I. That didnt work - it stays the same width as when the page was loaded, and the GridPanel does not expand downwards to show all three items. I have tried to add a LayoutConfig but if I do, the whole Panel/GridPanel disappears.
What am I doing wrong?
In this case I have a ViewPort (Layout="VBoxLayout"). Inside that ViewPort I have three items:
- A Panel that wraps a ComboBox that I want to, as always, resize according to its parent container. Has LayoutConfig specified.
- Another Panel. In my real world code I have here a UserControl that is a Form. In this scaled down example its just a bit of text. Should also extend all the width, and resize but doesnt.
- A GridPanel. Same GridPanel as in Part I that should resize itself with its container. doesnt matter if I wrap it with a Panel or not.
I have tried to "take in" some of the comments that Geoffrey made, but failed to make it work as expected anyways.
I tried to wrap the GridPanel inside a Panel to get it to resize as in the example in Part I. That didnt work - it stays the same width as when the page was loaded, and the GridPanel does not expand downwards to show all three items. I have tried to add a LayoutConfig but if I do, the whole Panel/GridPanel disappears.
What am I doing wrong?
<%@ 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>
<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">
<Items>
<ext:Panel ID="Panel3" runat="server" AutoScroll="true" RowHeight="1" Layout="FitLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:ComboBox runat="server" EmptyText="TestComboBox" Icon="User" DisplayField="CustomerName" ValueField="CustomerId">
<Items>
<ext:ListItem Text="Test 1" Value="1" />
<ext:ListItem Text="Test 2" Value="2" />
<ext:ListItem Text="Test 3" Value="3" />
<ext:ListItem Text="Test 4" Value="4" />
</Items>
</ext:ComboBox>
</Items>
<BottomBar>
<ext:Toolbar ID="Toolbar5" runat="server">
<Items>
<ext:Button ID="Button5" runat="server" Icon="Anchor" Text="Bla bla"></ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
<ext:Panel ID="Panel4" runat="server" AutoScroll="true" Layout="FitLayout">
<Items>
<ext:TextArea runat="server" Text="testing testing<br><br>Test 2 test 2<br><br>testing testing<br><br>Test 2 test 2<br><br>testing testing<br><br>Test 2 test 2<br><br>testing testing<br><br>Test 2 test 2<br><br>testing testing<br><br>Test 2 test 2<br><br>testing testing<br><br>Test 2 test 2<br><br>"></ext:TextArea>
</Items>
</ext:Panel>
<ext:Panel ID="Panel1" runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanel5" runat="server" StoreID="Store1" StripeRows="true" Header="true" Border="true">
<TopBar>
<ext:Toolbar ID="Toolbar6" runat="server">
<Items>
<ext:Button ID="btnCreateNewCustomer" runat="server" Icon="Add" Text="Test button2"></ext:Button>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:Button ID="Button_CustomersRefresh" runat="server" Icon="ArrowRefresh" Text="Refresh"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel5" 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="GridView5" runat="server" ForceFit="true" />
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; May 19, 2011 at 1:04 PM.
Reason: [CLOSED]
Originally Posted by wagger
