PDA

View Full Version : Problem when add item to collapsed panel



earist
11 Jul 2012, 1:48 AM
Hi, all

I use ExtJS version 4.0.7
I created viewport as border layout like the attached file (border.zip)

For south panel, it was stateful and its items would be added after viewport was rendered.
The items was rendered correctly if south panel was expanded.
But they could not be rendered when I collapsed this panel, refreshed page and then expanded this panel again.

Step for reproduce;


1. Open page
2. Collapse the south panel
3. Refresh page
4. Expand the south panel


South panel code:



{
xtype: 'tabpanel',
id : 'south-panel',
region : 'south',
activeTab : 0,
height : 200,
collapsible : true,
floatable : true,
split : true,
getState : function() {
return {
collapsed : this.collapsed
};
},
applyState : function(state) {
if (state && state.collapsed)
this.collapsed = state.collapsed;
},
saveState : function() {
var me = this, id, state;
if (me.stateful !== false) {
id = me.getStateId();
if (id) {
state = me.getState();
if (me.fireEvent('beforestatesave', me, state) !== false) {
Ext.state.Manager.set(id, state);
me.fireEvent('statesave', me, state);
}
}
}
}
}


Afterrender code:


listeners: {
afterrender: function()
{
var south = Ext.getCmp("south-panel");
if (south)
south.add({
title : 'South Tab',
id : 'in-south-panel',
layout: 'border',
items : [ {
xtype : 'toolbar',
region : 'north',
items : [ 'Search:', ' ', Ext.create('Ext.form.field.Trigger')]
}, {
xtype : 'panel',
autoScroll : true,
region : 'center',
margin : '0 0 3 0',
html: 'Test'
} ]
});
}
}



South panel and its items were displayed correctly:
37049

South panel and its items were displayed incorrectly:
37050


How should I do if I would like to add items to the panel after viewport is rendered?

Thank you in advance.
earist.

sword-it
11 Jul 2012, 2:53 AM
Hi earist (http://www.sencha.com/forum/member.php?181292-earist) ,
You have to use doComponentLayout() method for your south panel when you are adding items to it in viewport afterrender event.

Try the Code given below:


listeners: {
afterrender: function()
{
var south = Ext.getCmp("south-panel");
if (south)
south.add({
title : 'South Tab',
id : 'in-south-panel',
layout: 'border',
items : [ {
xtype : 'toolbar',
region : 'north',
items : [ 'Search:', ' ', Ext.create('Ext.form.field.Trigger')]
}, {
xtype : 'panel',
autoScroll : true,
region : 'center',
margin : '0 0 3 0',
html: 'Test'
} ]
});
south.doComponentLayout();
}
}

earist
11 Jul 2012, 5:53 PM
Hi, sword-it

I try to use south.doComponentLayout() as your suggestion.
But this bug still occcure on all browsers (Firefox, IE, Chrome).

hdave
6 Dec 2012, 7:11 PM
Did you solve this? I am having the same problem. Adding items to a collapsed panel messes things up.

earist
10 Dec 2012, 6:40 PM
Hi hdave,

I sovled this problem by using expand event.

I added expand events to all panels that can be collapsed/expanded and then checking the component after the panel is expanded.

For example,

1. Create application with expand event (In this case, I added this event to my south panel)



Ext.define('Me.Application', {
extend : 'Ext.util.Observable',
constructor : function(config) {
this.addEvents({
"south-expand" : true,
});
...




...
southExpand : function() {
Me.application.fireEvent('south-expand', EWork.application);
},
...




Me.application = new Me.Application();


2. For my south panel, called southExpand function after this panel is expanded.



...
listeners : {
expand : function(panel) {
Me.application.southExpand();
}
},
...


3. For south-expand function, checking search-view component in south-panel. If the view is not found, create new one and add to south-panel.



Me.application.on('south-expand', function() {
var southPanel = Ext.getCmp('south-panel'), searchView = Ext.getCmp('search-view');
if (!southPanel.getComponent('search-view')) {
if (!searchView)
searchView = Ext.create('Me.SearchView');
southPanel.insert(0, searchView);
southPanel.doComponentLayout();
}
});