PDA

View Full Version : Border Layout TreePanel collapse issue



rakesh.mmp
10 Jul 2014, 5:16 AM
Hi,

I am working with Sencha Architect 3.1 , and i am facing an issue with Tree Panel collapse.
There is a view port with Border layout .
In the west region there is one Tree Panel and Panel with same width.
I have an event listener for click of leaf node in a Tree Panel in which i will give this.collapse(),
but when the Tree Panel is expanded next time it moves towards the right.

Here is a sample fiddle which i have done which has the same problem.
https://fiddle.sencha.com/#fiddle/7in

So i want to know the solution for this.

With Regards,
Rakesh

vipul.suthar
14 Jul 2014, 7:42 PM
Its working; :)

Ext.onReady(function() {

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});


Ext.create('Ext.window.Window', {
width: 800,
height: 600,

layout: 'border',

items: [{
xtype: 'treepanel',
title: 'panel1',
region: 'west',
store:store,
animCollapse: true,
collapsed: true,
collapsible: true,
hideCollapseTool: true,
title: 'Menu',
id:'treeMenu',
titleCollapse: false,
width:300,


},{
xtype: 'panel',
title: 'panel3',
region: 'center',


collapsible: true,
collapsed: false,
animCollapse: false,
titleCollapse: true
},
{
xtype: 'panel',
title: 'panel2',
region: 'east',
width:300

}]
}).show();

var tree = Ext.getcmp('treeMenu');
tree.on('click',function(){
Ext.getcmp('treeMenu').collapse();
});

});

vipul.suthar
14 Jul 2014, 8:32 PM
you put west two time in last item

rakesh.mmp
15 Jul 2014, 4:19 AM
49663
Hi Vipul,
i want both the panels in the west region panel 2 and menu.So i have given region west with both having same width and one collapsed initially.When you click title of Menu after it collapses first time it expands but it moves towards right that is over panel3(center region).I dont want it to move towards right when it is expanded.I am facing this problem and i wanted solution for this.

With Regards
Rakesh

vipul.suthar
15 Jul 2014, 10:55 AM
then you should use the hbox layout for the west item. http://docs.sencha.com/extjs/4.2.2/#!/example/layout/border.html

xtype : 'panel',
region: 'west',
height:'100%',
width:'100%',
animCollapse: true,
collapsed: true,
collapsible: true,
layout : {
type : 'hbox'
}
items : [
{
xtype: 'treepanel',
title: 'panel1',
store:store,
animCollapse: true,
collapsed: true,
collapsible: true,
hideCollapseTool: true,
title: 'Menu',
id:'treeMenu',
titleCollapse: false

},
{
xtype: 'panel',
title: 'panel2',
width:300,
collapsible:true
}
],
{
xtype: 'panel',
title: 'panel3',
region: 'center',
collapsible: true,
collapsed: true,
animCollapse: false,
titleCollapse: true
},

{
xtype: 'panel',
title: 'panel4',
region: 'east',
collapsible: true,
collapsed: true,
animCollapse: false,
titleCollapse: true
}