Sencha Touch version tested:
1.1.1

Platform tested against:
  • Mac OSX Google Chrome 15.0.874.100
    Android 2.1
    Android 2.2


Description:
if buttons are added as new Ext.Button, they can magically disapear toggling between hidden and visible viewports. example below with btn3 disapearing when you press back on viewport2

Code:
Ext.setup({

    onReady: function() {
        
        var btn3 = new Ext.Button({
                xtype: 'button',
                text: 'btn3'
            });
            
        var toolbaritems = [
            {
                xtype: 'button',
                text: 'btn1',
                handler: function() {
                    viewport1.setVisible(false);
                    viewport2.setVisible(true);
                }
            },
            {
                xtype: 'button',
                text: 'btn2',
                handler: function() {
                    alert('hello world');
                }
            },
            btn3
        ];

        viewport1 = new Ext.Panel({
            fullscreen: true,
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    title: 'title1'
                },
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    layout: {
                        type: 'hbox',
                        align: 'center'
                    },
                    height: '70px',
                    items: toolbaritems
                }
            ]
        });

        viewport2 = new Ext.Panel({
            fullscreen: true,
            hidden: true,
            scroll: 'vertical',
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    title: 'title2',
                    items: [
                            {
                                xtype: 'button',
                                ui: 'back',
                                text: 'Back',
                                handler: function() {
                                    viewport2.setVisible(false);
                                    viewport1.setVisible(true);
                                }
                            }
                        ]
                },
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    layout: {
                        type: 'hbox',
                        align: 'center'
                    },
                    height: '70px',
                    items: toolbaritems
                }
            ],
            layout: {
                type: 'vbox',
                align: 'center'
            }
        });
    }
});
i need to label the button to be able to use other functionality on it later on, anyone knows another way to id a specific component to be retrievable later? or why this example is magically hidding the button when it shouldnt?