Hybrid 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

  2. #2
    Sencha User
    Join Date
    May 2011
    Posts
    52
    Vote Rating
    0
    mbalsam will become famous soon enough

      0  

    Default


    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.

    Code:
    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.

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    52
    Vote Rating
    0
    mbalsam will become famous soon enough

      0  

    Default


    so, is this considered a bug? any feedback?

  4. #4
    Ext GWT Premium Member
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
    Philippe Quemener is on a distinguished road

      0  

    Default


    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi