PDA

View Full Version : [CLOSED] Moving from ext 1.x to 2.x



garyawalker
Jan 01, 2015, 3:02 PM
I am moving from ext 1.x to 2.x and hopefully to 3.x soon. I need help converting to some of the new components particularly with layouts. my project uses layout heavily such as 'ext:RowLayout' and 'ext:LayoutRows' here a sample i need help with


<ext:Viewport ID="ViewPort1" runat="server">
<Items>

<ext:RowLayout ID="RowLayout1" runat="server" Split="true">
<Rows>
<ext:LayoutRow RowHeight="0.50">

<ext:Panel ID="Panel1" runat="server" Title="Charts" Icon="ChartBar" Layout="Fit">
<Items>
<ext:Panel ID="chartPanel1"
runat="server" Border="false"
Height="300">
</ext:Panel>
</Items>
</ext:Panel>
</ext:LayoutRow>

<ext:LayoutRow RowHeight="0.50">
<ext:Panel
ID="pnlSouth"
runat="server"
Title="Performances"
Height="500"
Icon="Basket"
Layout="Fit">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ComboBox ID="txtYear" runat="server" EmptyText="[SELECT YEAR]">
<DirectEvents>
<Select OnEvent="txtYear_Select">
<EventMask ShowMask="true" Msg="Gathering data, please wait..." />
</Select>
</DirectEvents>

</ext:ComboBox>

<ext:ToolbarSeparator/>

<ext:ComboBox ID="txtTerm" runat="server" EmptyText="[SELECT TERM]">
<DirectEvents>
<Select OnEvent="txtTerm_Select">
<EventMask ShowMask="true" Msg="Gathering data, please wait..." />
</Select>
</DirectEvents>

</ext:ComboBox>

<ext:ToolbarSeparator/>

<ext:ComboBox ID="txtClassID" runat="server" EmptyText="[SELECT GRADELEVEL]">
<DirectEvents>
<Select OnEvent="txtClassID_Select">
<EventMask ShowMask="true" Msg="Gathering data, please wait..." />
</Select>
</DirectEvents>
</ext:ComboBox>

<ext:ToolbarSeparator/>

<ext:ToolbarFill />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:GridPanel
ID="GridPanel1"
runat="server" StripeRows="true" TrackMouseOver="true"
Border="false" AutoExpandColumn="SubjectName" ColumnLines="true"
Cls="x-grid-custom">
<Store>
<ext:Store ID="Store2" runat="server" DataSourceID="SqlDataSource1">
<Reader>
<ext:JsonReader IDProperty="ID">
<Fields>
<ext:RecordField Name="GRADELEVEL" Type="Int" />
<ext:RecordField Name="SUBJECTNAME" />
<ext:RecordField Name="GENDER" />
<ext:RecordField Name="AVERAGE" Type="Float" />
<ext:RecordField Name="COHORT" Type="Int" />
<ext:RecordField Name="RANGE1" Type="Int" />
<ext:RecordField Name="RANGE2" Type="Int" />
<ext:RecordField Name="RANGE3" Type="Int" />
<ext:RecordField Name="RANGE4" Type="Int" />
<ext:RecordField Name="RANGE5" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
</BaseParams>
<Listeners>
</Listeners>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:NumberColumn DataIndex="GRADELEVEL" Header="GRADELEVEL" Width="90" Format="0" Align="Center"/>
<ext:Column DataIndex="GENDER" Header="GENDER" Width="90"/>
<ext:Column ColumnID="SubjectName" DataIndex="SUBJECTNAME" Header="SUBJECTS" />
<ext:Column DataIndex="AVERAGE" Header="AVERAGE" Width="90" Align="Center">
<Renderer Fn="change"/>
</ext:Column>

<ext:NumberColumn DataIndex="COHORT" Header="COHORT" Format="0" Width="90" Align="Center"/>
<ext:NumberColumn DataIndex="RANGE1" Header="80-100" Format="0%" Width="60" Align="Center"/>
<ext:NumberColumn DataIndex="RANGE2" Header="70-79" Format="0%" Width="60" Align="Center"/>
<ext:NumberColumn DataIndex="RANGE3" Header="60-69" Format="0%" Width="60" Align="Center"/>
<ext:NumberColumn DataIndex="RANGE4" Header="50-59" Format="0%" Width="60" Align="Center"/>
<ext:NumberColumn DataIndex="RANGE5" Header="0-49" Format="0%" Width="60" Align="Center"/>

</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</Items>
<Listeners>
<Expand Handler="#{Store2}.reload();" />
</Listeners>
</ext:Panel>
</ext:LayoutRow>
</Rows>
</ext:RowLayout>
</Items>
</ext:Viewport>

geoffrey.mcgill
Jan 02, 2015, 12:03 AM
Please see Item #34 of the Breaking Changes for Release 2.0.0.

http://examples2.ext.net/#/Getting_Started/Release_Documents/BREAKING_CHANGES/

Using the VBoxLayout may be a better solution than RowLayout.

As well, when posting in the forums, please ensure you post all code samples inside [CODE] tags. More information is available in the Forum Guidelines (http://forums.ext.net/showthread.php?10205-More-Information-Required).

Hope this helps.

Daniil
Jan 05, 2015, 10:41 AM
Hello,

There is also the item #127.


127. A RowLayout has been removed. Use an AnchorLayout or a VBoxLayout instead.
http://examples2.ext.net/#/search/AnchorLayout
http://examples2.ext.net/#/search/VBoxLayout

garyawalker
Jan 06, 2015, 1:20 AM
Thank you!