Problem when add item to collapsed panel

[earist]

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:
Correctly South.png

South panel and its items were displayed incorrectly:
Incorrectly South.png


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]

Hi 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]

Hi, sword-it

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

[hdave]

Did you solve this? I am having the same problem. Adding items to a collapsed panel messes things up.

[earist]

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();
    }
});