PDA

View Full Version : Tree Panel delay in expand after hiding



rakesh.mmp
8 Jul 2014, 2:23 AM
Hi,
I have a Main ViewPort with Border Layout with four regions in it


The north region there is a Header which is panel.
The South region is footer which is a panel.
The East region is also panel.
The West region there is Tree Panel.
49597



Ext.define('projectName.view.mainView', {
extend: 'Ext.container.Viewport',


requires: [
'projectName.view.header',
'projectName.view.navigation',
'projectName.view.searchContent',
'projectName.view.content',
'projectName.view.footer',
'Ext.tree.Panel'
],


itemId: 'mainView',
layout: 'border',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'container',
region: 'center',
cls: 'mainContainer',
layout: 'border',
items: [
{
xtype: 'appHeader',
height: 100,
region: 'north'
},
{
xtype: 'navigation',
region: 'west'
},
{
xtype: 'searchContent',
region: 'west'
},
{
xtype: 'content',
region: 'center'
},
{
xtype: 'footer',
region: 'south'
}
]
}
]
});


me.callParent(arguments);
}


});





For Tree Panel the code is as shown below.


Ext.define('projectName.view.navigation', {
extend: 'Ext.tree.Panel',
alias: 'widget.navigation',


requires: [
'Ext.tree.View'
],


width: 295,
animCollapse: true,
collapsed: true,
collapsible: true,
hideCollapseTool: true,
title: 'Menu',
titleCollapse: false,
store: 'navigationStore',
rootVisible: false,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
viewConfig: {


}
});


me.callParent(arguments);
}


});





By the above setting of config the Tree panel should collapse / expand by click on title.
But now I want to hide the panel on click of leaf in the Tree.
The code shown below is written in navigation selection change i.e tree panel selection change.


var record = records[0],
text = record.get('text'),
xtype = record.get('id'),
alias = 'widget.' + xtype,
searchContentPanel = this.getSearchContent(),
contentPanel = this.getContent(),
cmp;


if (xtype && record.isLeaf()) {
searchContentPanel.removeAll(true);


contentPanel.removeAll(true);
var className = Ext.ClassManager.getNameByAlias(alias);
var ViewClass = Ext.ClassManager.get(className);


cmp = new ViewClass();
searchContentPanel.add(cmp);
if (cmp.floating) {
cmp.show();
}
var navigation = this.getNavigation();
navigation.collapse();
}





On click of leaf tree panel will collapse.
But after collapse if I click the title of panel the collapsed panel moves towards right.
I wanted to know the reason and solution for this.

Here is the link of fiddle. https://fiddle.sencha.com/#fiddle/7in

Please help me.

Thanks & regards
Rakesh

mitchellsimoens
16 Jul 2014, 10:01 AM
It's collapsing for me.

rakesh.mmp
20 Jul 2014, 9:28 PM
Hi mitchellsimoens,
It will colllapse, but next time if the menu is clicked, the Tree panel expands and moves towards the right.
Is there any way i can stop the Tree Panel from moving to the right.
With Regards,
Rakesh