May 07, 2013, 8:30 AM
[CLOSED] How to handle Layouts after migrating versions?
Hi,
I have migrate my application to v2.x from v1.6 here is reproductive sample:
master.page
Thanks,
ViDom
I have migrate my application to v2.x from v1.6 here is reproductive sample:
master.page
<%@ Master Language="C#" AutoEventWireup="true" Inherits="Ext.NetTest2.x.SiteMaster" %>
<%@ Register tagPrefix="ext" assembly="Ext.Net" namespace="Ext.Net" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:Viewport runat="server" ID="viewport">
<LayoutConfig>
<ext:VBoxLayoutConfig runat="server" Align="Stretch"/>
</LayoutConfig>
<Items>
<ext:Container runat="server" ID="logoContainer" Height="50"></ext:Container>
<ext:Toolbar ID="MenuMain" runat="server" Height="30" Border="false">
<Items>
<ext:Button ID="MenuStart" runat="server" OnClientClick="window.location.href='Start.aspx'"
Icon="ColorWheel" />
</Items>
</ext:Toolbar>
<ext:Container ID="PanelMain" runat="server" Split="false" AutoScroll="true" Border="false"
Collapsible="false" Flex="1">
<LayoutConfig>
<ext:FitLayoutConfig runat="server"/>
</LayoutConfig>
<Content>
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</Content>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Start.aspx<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" Inherits="Ext.NetTest2.x.Start" %>
<%@ Register tagPrefix="uc1" tagName="Test" src="Test.ascx" %>
<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net, Version=2.2.0.23690, Culture=neutral, PublicKeyToken=2e12ce3d0176cd87" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<ext:Container ID="content" runat="server">
<LayoutConfig>
<ext:FitLayoutConfig runat="server"/>
</LayoutConfig>
<Content>
<uc1:Test runat="server"/>
</Content>
</ext:Container>
</asp:Content>
Test.ascx<%@ Control Language="C#" AutoEventWireup="true" Inherits="Ext.NetTest2.x.Test" %>
<%@ Import Namespace="Ext.NetTest2.x" %>
<%@ Register TagPrefix="ext1" Namespace="Ext.Net" Assembly="Ext.Net, Version=2.2.0.23690, Culture=neutral, PublicKeyToken=2e12ce3d0176cd87" %>
<script runat="server">
private int controls;
protected override void OnInit(EventArgs e)
{
List<MyClass> myClasses = new List<MyClass>()
{
new MyClass(1,"first"),
new MyClass(2,"second"),
new MyClass(3,"third")
};
StoreMain.DataSource = myClasses;
Random rd = new Random();
int startIndex = rd.Next(1, 10);
int endIndex = rd.Next(11, 20);
controls = rd.Next(startIndex,endIndex);
int index = 1;
while (controls != 0)
{
table.Items.Add(new Ext.Net.Button{ID="b"+index,Text = index.ToString()});
index++;
controls--;
}
}
</script>
<ext1:Container ID="border" Layout="BorderLayout" runat="server">
<Items>
<ext1:Panel ID="PanelDicListSearch" Border="False" Region="North" runat="server" ManageHeight="True" Collapsible="false" Header="false" Split="true" AutoHeight="True">
<LayoutConfig>
<ext1:VBoxLayoutConfig runat="server" Pack="Center" Align="Stretch"/>
</LayoutConfig>
<Items>
<ext1:Hidden runat="server" ID="ScrollStore" Flex="0"/>
<ext1:Panel runat="server" ID="panelButtonsExt" Layout="HBoxLayout" Collapsible="false" Border="False" Height="38">
<Items>
<ext1:Container ID="cntButtons" runat="server" Layout="HBoxLayout" Cls="list-button" Border="false" Height="36">
<Items>
<ext1:Button runat="server" ID="btnReturn" Text="Return" Icon="ResultsetPrevious" Height="26" Width="75">
</ext1:Button>
</Items>
</ext1:Container>
</Items>
</ext1:Panel>
<ext1:Panel Border="False" runat="server" ID="panelSearchControlMain" Collapsible="false"
AnchorHorizontal="100%" AutoWidth="True" Flex="1">
<BottomBar>
<ext1:Toolbar ID="ToolbarSearchSimple" Layout="HBoxLayout" runat="server" Height="32" AnchorHorizontal="100%">
<LayoutConfig>
<ext1:HBoxLayoutConfig runat="server" Align="Stretch"/>
</LayoutConfig>
<Items>
<ext1:Label runat="server" ID="lblListTitle" Cls="listTitle" Flex="1"></ext1:Label>
<ext1:FieldContainer ID="CompositeField1" runat="server" Height="26" Flex="1">
<LayoutConfig>
<ext1:HBoxLayoutConfig runat="server" Align="Middle" Pack="Center"/>
</LayoutConfig>
<Items>
<ext1:Button ID="Button_Clear" runat="server" Icon="PageWhite" Height="26" Text="Clear" Width="75">
</ext1:Button>
<ext1:TextField ID="TextField_SimpleSearch" runat="server" Width="150" Margins="4"
Height="20" EnableKeyEvents="true">
<Listeners>
<KeyPress Handler="if(e.getKey() == Ext.EventObject.ENTER){e.stopEvent();#{Button_Search}.fireEvent('click');}" />
</Listeners>
</ext1:TextField>
<ext1:Button ID="Button_Search" runat="server" Text="Search" Icon="Find" Height="26" Width="75">
<DirectEvents>
<Click Timeout="60000"></Click>
</DirectEvents>
<ext1:KeyMap ID="KeyMapSearchCustom" runat="server" Target="={#{panelSearchControlMain}.getBody()}">
<Binding>
<ext1:KeyBinding Handler="e.stopEvent();#{Button_Search}.fireEvent('click');">
<Keys>
<ext1:Key Code="ENTER" />
</Keys>
</ext1:KeyBinding>
</Binding>
</ext1:KeyMap>
</ext1:Button>
</Items>
</ext1:FieldContainer>
<ext1:FieldContainer ID="Composite1" runat="server" Flex="1">
<LayoutConfig>
<ext1:HBoxLayoutConfig runat="server" Align="Stretch" Pack="End"/>
</LayoutConfig>
<Items>
<ext1:DisplayField ID="DisplayField1" runat="server" Flex="1" Html=" " />
<ext1:Button runat="server" ID="Button_SearchToggle" Text="Show / Hide search parameters"
Icon="SectionCollapsed" Height="26">
<Listeners>
<Click Handler="#{panelSearchControlAdd}.toggleCollapse();" />
</Listeners>
</ext1:Button>
</Items>
</ext1:FieldContainer>
</Items>
</ext1:Toolbar>
</BottomBar>
</ext1:Panel>
<ext1:Panel ID="panelSearchControlAdd" Border="False" runat="server" AutoDoLayout="true"
AutoHeight="true" AnimCollapse="false" Collapsible="True" Collapsed="True" AnchorHorizontal="100%" Flex="1">
<LayoutConfig>
<ext1:FitLayoutConfig runat="server"/>
</LayoutConfig>
<Items>
<ext1:Container runat="server" ID="phCustomSearchForm">
<Items>
<ext1:Container runat="server" ID="table">
<LayoutConfig>
<ext1:TableLayoutConfig runat="server" Columns="3"></ext1:TableLayoutConfig>
</LayoutConfig>
</ext1:Container>
</Items>
</ext1:Container>
</Items>
<Loader runat="server">
<ext1:LoadMask ShowMask="true" Msg="Proszę poczekać ..." />
</Loader>
<Listeners>
<AfterLayout Handler="#{viewport}.doLayout();" />
<Collapse Handler="#{viewport}.doLayout();" />
<Expand Handler="#{viewport}.doLayout();" />
</Listeners>
</ext1:Panel>
</Items>
</ext1:Panel>
<ext1:Panel ID="PanelDicListGrid" runat="server" Region="Center" AutoDoLayout="True" Collapsible="false"
Header="false" Split="true" AnchorHorizontal="100%" Layout="FitLayout" Flex="2" MaintainFlex="True">
<Items>
<ext1:GridPanel ID="GridPanelMain" runat="server" SelectionMemory="True" AnchorHorizontal="100%" Cls="grid-mme">
<Store>
<ext1:Store ID="StoreMain" runat="server" RemoteSort="true" AutoLoad="False" PageSize="50" IgnoreExtraFields="True">
<Reader>
<ext1:JsonReader runat="server" TotalProperty="TotalRecords" Root="data"/>
</Reader>
<AutoLoadParams>
<ext1:Parameter Name="start" Value="0" Mode="Raw" />
<ext1:Parameter Name="limit" Value="50" Mode="Raw" />
<ext1:Parameter Name="sort" Value="" />
<ext1:Parameter Name="dir" Value="" />
</AutoLoadParams>
<Model>
<ext1:Model runat="server">
<Fields>
<ext1:ModelField runat="server" Name="Id" Type="Int"></ext1:ModelField>
<ext1:ModelField runat="server" Name="Name" Type="String"></ext1:ModelField>
</Fields>
</ext1:Model>
</Model>
</ext1:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext1:Column ID="IdColumn" runat="server" Text="Id" DataIndex="Id"></ext1:Column>
<ext1:Column ID="NameColumn" runat="server" Text="Name" DataIndex="Name"></ext1:Column>
</Columns>
</ColumnModel>
<BottomBar>
<ext1:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="50" DisplayInfo="True" >
<Plugins>
<ext1:SlidingPager>
</ext1:SlidingPager>
</Plugins>
</ext1:PagingToolbar>
</BottomBar>
<View>
<ext1:GridView runat="server" ID="gridView">
<GetRowClass Handler="if (record.data.CssClass != '') return record.data.CssClass;"></GetRowClass>
</ext1:GridView>
</View>
<Loader runat="server">
<ext1:LoadMask ShowMask="true" Msg="Please wait ..." StoreID="StoreMain" />
</Loader>
</ext1:GridPanel>
</Items>
</ext1:Panel>
</Items>
</ext1:Container>
MyClass.cs[Serializable]
public class MyClass
{
public int Id { get; set; }
public string Name { get; set; }
public MyClass(int id, string name)
{
Id = id;
Name = name;
}
}
When I click on Show / Hide search parameters My layout crashed. I'm aware of using borderLayout (north panel whould have explicit height but in my case Controls inside one panel are generated dynamically) so what layout should I use for this situation? border worked for me in v1.6Thanks,
ViDom
Last edited by Daniil; May 10, 2013 at 10:55 AM.
Reason: [CLOSED]