PDA

View Full Version : Ext AccordionLayout



yogeshmsharma
7 Feb 2010, 6:01 AM
I am having border layout and on west section I have placed AccordionLayout which contains multiple tree panel.

Problem I am facing is when I collapse One pane in AccordionLayout tree under that vanishes.

It doesn't show up.


I am working on it for couple of days but could not able to solve it.





var root1 = new Ext.tree.AsyncTreeNode({
allowDrag:true,
allowDrop:true,
id:'root1',
text:'Root1',
loader:new Ext.tree.TreeLoader({dataUrl:'/home/tree.json'})
});
var root2 = new Ext.tree.AsyncTreeNode({
allowDrag:true,
allowDrop:true,
id:'root2',
text:'Root1',
loader:new Ext.tree.TreeLoader({dataUrl:'/home/tree.json'})
});

var root3 = new Ext.tree.AsyncTreeNode({
allowDrag:true,
allowDrop:true,
id:'root3',
text:'Root3',
loader:new Ext.tree.TreeLoader({dataUrl:'/home/tree.json'})
});


// Tree panel
var tree1 = new Ext.tree.TreePanel({
id:'tree1',
border:false,
width:150,
//autoWidth:true,
height: (document.documentElement.clientHeight-60),
//animate:true,
enableDD:true,
autoScroll:true,
lines:false,
rootVisible:true,
loader: new Ext.tree.TreeLoader(),
root: root1,
//renderTo::this.divClass2,
title:'Class Room1'
});
var tree2 = new Ext.tree.TreePanel({
id:'tree2',
border:false,
hideMode:'offsets',
width:150,
autoWidth:true,
height: (document.documentElement.clientHeight-60),
animate:true,
enableDD:true,
autoScroll:true,
lines:false,
rootVisible:true,
loader: new Ext.tree.TreeLoader(),
root: root2,
split: true,
//renderTo:this.divClass1,
collapsible: true,
collapseMode:'mini',
title:'Class room 2'
});

var tree3 = new Ext.tree.TreePanel({
id:'tree3',
border:false,
width:150,
hideMode:'offsets',
autoWidth:true,
height: (document.documentElement.clientHeight-60),
animate:true,
enableDD:true,
autoScroll:true,
lines:false,
rootVisible:true,
loader: new Ext.tree.TreeLoader(),
root: root3,
split: true,
collapsible: true,
collapseMode:'mini',
title:'Class3"
});


var accordion = new Ext.Panel({
margins:'5 0 5 5',
split:true,
width: 140,
layout:'accordion',
border:false,
layoutConfig: {
animate:false
},
renderTo:this.parentdiv,
items: [tree1,tree2,tree3],
id:'treePanel'
});









Div for my rendering are which I am loading using velocity template at run time


<div id ="shellContentRegion">

<div id ="icon1">
<div id="aboutMsg"><a class="profile" href="javascript:void(0)" id="about"> About</a></div>
<div id="helpMsg"><a class="profile" href="javascript:void(0)" id="help"> Help</a></div>
<div id="logoutMsg"><a class="profile" href="javascript:void(0)" id="logout"> Logout</a></div>
<div id="welcomeMsg">Welcome, ${currentUser}</div>
</div>
<div id="treeRegion" >
</div>

<div id="bodyRegion"></div>
<div id="statusRegion" ></div>


</div>






Thanks in Advance

yogeshmsharma
8 Feb 2010, 1:34 AM
Hi Guys ,
i figured out what is problem. Problem is actually height of treePanel.
If we keep autoHeight: true for treepanels accorion layout works fine.

But when we do initialize some height to hardCode value it fails to render.