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

[mbalsam]

I found a solution that seems to work. I added listeners for the resize and orientationchange events to the TabPanel where I call doComponentLayout for all Tabs.

listeners: {
resize: function (cmp) {
cmp.items.each(function (item) {
item.doComponentLayout();
});
},
orientationchange: function (cmp) {
cmp.items.each(function (item) {
item.doComponentLayout();
});
}
}

Interestingly only the orientationchange listener is called even in Chrome, i.e. the resize listener may be unnecessary.

[mbalsam]

so, is this considered a bug? any feedback?

[Philippe Quemener]

I can confirm that there is a bug with adding/removing toolbars, I had it in my app, too. Fortunately (at least for me) I could solve it by wrapping the whole thing in another way:

Before, my app consist of a TabPanel with a tabBar docked to the bottom. Some of the cards were lists and some of the lists were adding/removing toolbars when the cardswitch was done. If you do a resize and the switch to one of the lists with toolbars, the list disappeared and it seemed that the bottom tabBar "jumped" to the top.

I solved it by wrapping the lists in panels and called the addDocked/removeDocked methods on the panel not on the TabPanel.

But I think this is a Sencha Touch bug and I hope this will be fixed.