Aug 12, 2013, 10:09 AM
[CLOSED] Expand all panel of accordion layout
Following is the markup of my cshtml page.
I wish to expand all panel of accordion. But onclick of Expand all randomly multiple panels are expanding.
How to expand all panels
I wish to expand all panel of accordion. But onclick of Expand all randomly multiple panels are expanding.
How to expand all panels
@using System.Web.Optimization;
@{
Layout = null;
var X = Html.X();
}
@Html.X().ResourceManager()
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script>
function CollapseAll() {
if (!Ext.getCmp('one').collapsed)
Ext.getCmp('one').collapse();
if (!Ext.getCmp('two').collapsed)
Ext.getCmp('two').collapse();
if (!Ext.getCmp('three').collapsed)
Ext.getCmp('three').collapse();
if (!Ext.getCmp('four').collapsed)
Ext.getCmp('four').collapse();
if (!Ext.getCmp('five').collapsed)
Ext.getCmp('five').collapse();
if (!Ext.getCmp('six').collapsed)
Ext.getCmp('six').collapse();
if (!Ext.getCmp('seven').collapsed)
Ext.getCmp('seven').collapse();
}
//hypExpandAll
function ExpandAll() {
if (Ext.getCmp('one').collapsed)
Ext.getCmp('one').expand();
if (Ext.getCmp('two').collapsed)
Ext.getCmp('two').expand();
if (Ext.getCmp('three').collapsed)
Ext.getCmp('three').expand();
if (Ext.getCmp('four').collapsed)
Ext.getCmp('four').expand();
if (Ext.getCmp('five').collapsed)
Ext.getCmp('five').expand();
if (Ext.getCmp('six').collapsed)
Ext.getCmp('six').expand();
if (Ext.getCmp('seven').collapsed)
Ext.getCmp('seven').expand();
}
</script>
</head>
<body>
<div>
@(X.FormPanel()
.ID("FrmEditRefRules")
.Title("Test")
.Items(
X.DisplayField().Text("<a href='javascript:CollapseAll();'>Collapse All</a> "),
X.DisplayField().Text("<a href='javascript:ExpandAll();'>Expand All</a>"),
X.Container().ID("cntPanels").Items(
X.Panel().Height(450).Layout(LayoutType.Accordion)
.Items(
X.Panel().Title("One").Layout(LayoutType.Container).Flex(1).ID("one")
.Items(
X.DisplayField().Text("First Penel")
),
X.Panel().Title("Two").Layout(LayoutType.Container).Flex(1).ID("two")
.Items(
X.DisplayField().Text("Second Penel")
)
,
X.Panel().Title("Three").Layout(LayoutType.Container).Flex(1).ID("three")
.Items(
X.DisplayField().Text("Third Penel")
),
X.Panel().Title("Four").Layout(LayoutType.Container).Flex(1).ID("four")
.Items(
X.DisplayField().Text("Fourth Penel")
)
, X.Panel().Title("Five").Layout(LayoutType.Container).Flex(1).ID("five")
.Items(
X.DisplayField().Text("Fiveth Penel")
),
X.Panel().Title("Six").Layout(LayoutType.Container).Flex(1).ID("six")
.Items(
X.DisplayField().Text("Sixth Penel")
)
, X.Panel().Title("Seven").Layout(LayoutType.Container).Flex(1).ID("seven")
.Items(
X.DisplayField().Text("Seventh Penel")
)
)
)
)
)
</div>
</body>
</html>
Last edited by Daniil; Aug 20, 2013 at 9:10 AM.
Reason: [CLOSED]
