Results 1 to 4 of 4

Thread: Problem with adding or remove docked Items after resizing

Threaded View

Previous Post Previous Post   Next Post Next Post
    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
      0  

    Default 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 Attached Images

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •