here's the working code
<ext:Viewport ID="Viewport_MultiPatient" runat="server" Layout="Center">
<Items>
<ext:BorderLayout ID="BorderLayout_MultiPatient" runat="server">
<North Split="true" Collapsible="false">
<ext:Panel ID="Panel_Header" runat="server" Layout="ColumnLayout" Height="30" Padding="2" Html="north">
</ext:Panel>
</North>
<Center>
<ext:Panel ID="Panel_Content" runat="server" Layout="myaccordion">
<Items>
<ext:Panel ID="Panel_Lab" runat="server" AnchorHorizontal="right" AnchorVertical="82%" Collapsed="false">
<TopBar>
<ext:Toolbar ID="Toolbar_LabMenuBar" runat="server">
<Items>
<ext:Button ID="Button_Toggler_LabLeft" runat="server" Icon="ApplicationGet">
<DirectEvents>
<Click OnEvent="ToggleButton_Clicked" After="TogglePanel">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="Panel" Value="LAB" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:ColumnLayout ID="ColumnLayout_LabContent" runat="server" Split="true" FitHeight="true">
<Columns>
<ext:LayoutColumn ColumnWidth="0.40">
<ext:Container ID="Container_LabContent_ResultList" runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel Cls="grid-row-span" ID="GridPanel_Lab_ResultList" runat="server" IDMode="Explicit" EnableColumnMove="false">
<Store>
<ext:Store ID="Store_Lab_ResultList" runat="server" AutoLoad="true" >
<Reader>
<ext:JsonReader IDProperty="RecordId">
<Fields>
<ext:RecordField Name="RecordId" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:GridPanel>
</Items>
</ext:Container>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.60">
<ext:Container ID="Container_LabContent_ReportList" runat="server">
<Items>
</Items>
</ext:Container>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>
<ext:Panel ID="Panel_Rad" runat="server" AnchorHorizontal="right" AnchorVertical="82%" Collapsed="true">
<TopBar>
<ext:Toolbar ID="Toolbar_Rad" runat="server">
<Items>
<ext:Button ID="Button_Toggler_RadLeft" runat="server" Icon="Application">
<DirectEvents>
<Click OnEvent="ToggleButton_Clicked" After="TogglePanel">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="Panel" Value="RAD" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:ColumnLayout ID="ColumnLayout_RadContent" runat="server" Split="true" FitHeight="true">
<Columns>
<ext:LayoutColumn ColumnWidth="0.40">
<ext:Container ID="Container_RadContent_ResultList" runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel Cls="grid-row-span" ID="GridPanel_Rad_ResultList" runat="server" AutoRender="true" IDMode="Explicit" EnableColumnMove="false">
<Store>
<ext:Store ID="Store_Rad_ResultList" runat="server" AutoLoad="true" RemoteSort="true">
<Reader>
<ext:JsonReader IDProperty="RecordId">
<Fields>
<ext:RecordField Name="RecordId" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:GridPanel>
</Items>
</ext:Container>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.60">
<ext:Container ID="Container_RadContent_ReportList" runat="server">
<Items>
</Items>
</ext:Container>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>
<ext:Panel ID="Panel_Other" runat="server" AnchorHorizontal="right" AnchorVertical="82%" Collapsed="true">
<TopBar>
<ext:Toolbar ID="Toolbar_Other" runat="server">
<Items>
<ext:Button ID="Button_Toggler_OtherLeft" runat="server" Icon="Application">
<DirectEvents>
<Click OnEvent="ToggleButton_Clicked" After="TogglePanel">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="Panel" Value="OTHER" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:ColumnLayout ID="ColumnLayout_OtherContent" runat="server" Split="true" FitHeight="true">
<Columns>
<ext:LayoutColumn ColumnWidth="0.40">
<ext:Container ID="Container_OtherContent_ResultList" runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel Cls="grid-row-span" ID="GridPanel_Other_ResultList" runat="server" IDMode="Explicit" EnableColumnMove="false">
<Store>
<ext:Store ID="Store_Other_ResultList" runat="server" AutoLoad="true" RemoteSort="true">
<Reader>
<ext:JsonReader IDProperty="RecordId">
<Fields>
<ext:RecordField Name="RecordId" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
</ext:GridPanel>
</Items>
</ext:Container>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.60">
<ext:Container ID="Container_OtherContent_ReportList" runat="server">
<Items>
</Items>
</ext:Container>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Viewport>
code behind
public void ToggleButton_Clicked(object sender, Ext.Net.DirectEventArgs e)
{
this.Button_Toggler_LabLeft.Icon = Ext.Net.Icon.Application;
this.Button_Toggler_RadLeft.Icon = Ext.Net.Icon.Application;
this.Button_Toggler_OtherLeft.Icon = Ext.Net.Icon.Application;
decimal lpane = 0.40M;
decimal rpane = 0.60M;
this.ColumnLayout_LabContent.Columns[0].ColumnWidth = lpane;
this.ColumnLayout_LabContent.Columns[1].ColumnWidth = rpane;
this.ColumnLayout_RadContent.Columns[0].ColumnWidth = lpane;
this.ColumnLayout_RadContent.Columns[1].ColumnWidth = rpane;
this.ColumnLayout_OtherContent.Columns[0].ColumnWidth = lpane;
this.ColumnLayout_OtherContent.Columns[1].ColumnWidth = rpane;
}
your script
Ext.layout.MyAccordionLayout = Ext.extend(Ext.layout.AccordionLayout, {
type : 'myaccordion',
renderItem : function (c) {
c.collapseEl = "body";
if (this.animate === false) {
c.animCollapse = false;
}
if (this.autoWidth) {
c.autoWidth = true;
}
if (this.collapseFirst !== undefined) {
c.collapseFirst = this.collapseFirst;
}
if (!this.activeItem && !c.collapsed) {
this.setActiveItem(c, true);
} else if (this.activeItem && this.activeItem != c) {
c.collapsed = true;
}
Ext.layout.AccordionLayout.superclass.renderItem.apply(this, arguments);
c.on('beforeexpand', this.beforeExpand, this);
},
onRemove : function (c) {
Ext.layout.AccordionLayout.superclass.onRemove.call(this, c);
c.un('beforeexpand', this.beforeExpand, this);
},
setItemSize : function (item, size) {
if (this.fill && item) {
var hh = 0,
i, ct = this.getRenderedItems(this.container),
len = ct.length,
p;
for (i = 0; i < len; i++) {
if ((p = ct[i]) != item && !p.hidden) {
hh += p.topToolbar.getHeight();
}
};
size.height -= hh;
item.setSize(size);
}
}
});
Ext.Container.LAYOUTS.myaccordion = Ext.layout.MyAccordionLayout;
var TogglePanel = function (b) {
var p = b.ownerCt.ownerCt;
p.toggleCollapse();
};