Threaded View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    52
    Vote Rating
    0
    mbalsam will become famous soon enough

      0  

    Default Problem with adding or remove docked Items after resizing

    Problem with adding or remove docked Items after resizing


    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:
    Code:
        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
    Attached Images