Problem with adding or remove docked Items after resizing

[mbalsam]

Sencha Touch version tested:

• 1.1.0

• only default ext-all.css

Platform tested against:

• iPad
• Chrome

Description:

• A TabPanel is the applications Viewport containing at least one Panel
• This Panel has another Panel docked left which contains a List and a Toolbar docked top
• Furthermore this Panel has a Toolbar docked top which contains a Button to remove the docked list panel and add it again respectively
• If the size of the Viewport is changed (e.g. orientation change) and the list panel is removed and then added again it doesn't show correctly
• Before resizing removing and adding again works perfectly
• Without the TabPanel (using the contained Panel as the Viewport) everything works perfectly also after resizing
• Conclusion: TabPanel related bug.

Test Case:

    Ext.regApplication({    name: 'app',
    
    launch: function () {
        Ext.regModel('ListItem', {
            fields: [
                {name: 'text', type: 'string'}
            ]
        });
        var listStore = new Ext.data.Store({
            model: 'ListItem',
            data : [
                {
                    text: 'Item1'
                },
                {
                    text: 'Item2'
                },
                {
                    text: 'Item3'
                }
            ]
        })
        app.views.viewport = new Ext.TabPanel({
            fullscreen: true,
            tabBar: {
                layout: {
                    type: 'hbox',
                    align: 'center',
                    pack: 'center'
                }
            },
            tabBarDock: 'bottom',
            items: [
                {
                    id: 'tab1',
                    xtype: 'panel',
                    iconCls: 'favorites',
                    title: 'Tab 1',
                    dockedItems: [
                        // list panel
                        {
                            id: 'listPanel',
                            xtype: 'panel',
                            dock: 'left',
                            width: 300,
                            style: 'border-right: 1px solid;',
                            dockedItems: [
                                {
                                    xtype: 'toolbar',
                                    dock: 'top',
                                    title: 'List'
                                }
                            ],
                            items: [
                                {
                                    xtype: 'list',
                                    itemTpl: '<p>{text}</p>',
                                    store: listStore
                                }
                            ]
                        },
                        // toolbar
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            title: 'Tab 1',
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'hide list',
                                    removed: false,
                                    handler: function () {
                                        if(!this.removed) {
                                            this.up('#tab1').removeDocked(Ext.getCmp('listPanel'), false);
                                            this.removed = true;
                                            this.setText('show list');
                                        } else {
                                            this.up('#tab1').addDocked(Ext.getCmp('listPanel'), 0);
                                            this.removed = false;
                                            this.setText('hide list');
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    iconCls: 'action',
                    title: 'Tab 2',
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            title: 'Tab 2'
                        }
                    ]
                }    
            ]
        });
    }
});

See this URL : http://

Steps to reproduce the problem:

• Create a TabPanel containing a Panel with a top-docked Toolbar and a left-docked Panel containing a List
• change the size of the Viewport (in Chrome e.g. show the JavaScript console, on iPad change the orientation)
• remove the List Panel from the Panel's docked items (panel.removeDocked(item, false))
• add it again (panel.addDocked(item, 0))

The result that was expected:

• After removing the docked list panel and adding it again (docked) it shows correctly.

The result that occurs instead:

• Only the docked toolbar of the list panel is shown.

Screenshot or Video:

• attached

Debugging already done:

• the panel's height is calculated 0 in the doComponentLayout method.

Possible fix:

• not provided