Sencha Sand Slide

Question

I am starting to use Sencha Touch and have already read them " Getting Started" , however I am now stuck in what I want and could not find a suitable textbook or example of what I need.

I want to make the panel so that when the user clicks on a certain button, the panel slides, and the toolbar on top disappears (or slides), and a new one appears just like it does in the native iOS application.

Here is my Sencha code:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {

        /*HANDLERS
        *********************************************************************************/
        var showAlert = function(btn, event) {
            Ext.Msg.alert('Title', 'Diste ' + event.type + ' en el botón "' + btn.text + '"', Ext.emptyFn);
        };

        var tapHandler = function(button, event) {

        };

        /*BUTTONS
        *********************************************************************************/
        var aboutAppBtn = [{
            text: 'Sobre App',
            ui: 'round',
            handler: showAlert
        }];

        var checkInBtn = [{
            text: 'Check-in',
            ui: 'forward',
            handler: tapHandler
        }];

        var buscarCercaBtn = [{
            text: 'Buscar local...',
            ui: 'button',
            handler: showAlert
        }];

        var buttonsGroup1 = [{
            text: 'Sobre App',
            ui: 'round',
            handler: showAlert
        }, {
            text: 'Check-in',
            ui: 'forward',
            handler: tapHandler
        }];

        /*PHONE || SCREEN
        **********************************************************************************/
        if (Ext.is.Phone) {// Phone has far less screen real-estate
            var dockedItems = [{
                xtype: 'toolbar',
                dock : 'top',
                ui: 'light',
                title: 'My Toolbar',
                items: buttonsGroup1
            }];
        }else{
            //var dockedItems = [topTB];
            aboutAppBtn.push({xtype: 'spacer'});
            var dockedItems = [{
                xtype: 'toolbar',
                dock : 'top',
                ui: 'light',
                title: 'My Toolbar',
                items: aboutAppBtn.concat(checkInBtn)
            },{
                xtype: 'button',
                dock: 'bottom',
                ui: 'action',
                text: 'Buscar local...',
                handler: showAlert
            }];
        }

        var green = {
            style: 'background-color:#3b7E00; color:white;',
            title: 'Green',
            html: 'Green'
        };

        var blue = {
            style: 'background-color:#0F0; color:white;',
            title: 'Blue',
            html: 'Blue'
        };

        /*PANELS
        **********************************************************************************/
        var mainPanel = new Ext.Panel({
            dockedItems: dockedItems,
            layout: 'card',
            cardSwitchAnimation: {type: 'flip', duration: 500},
            fullscreen : true,
            items: [green, blue]
        });
    }
});

Answer 1

To make a map transition when you click the button, use the setActiveItem method in your handler:

var tapHandler = function(button, event) {
    mainPanel.setActiveItem(1);
};

( , - ).

, , . , , ( , ).

"spacer", . , , , , , , ( , )

Ext.setup({
    onReady: function() {

        /*HANDLERS
        *********************************************************************************/
        var showAlert = function(btn, event) {
            Ext.Msg.alert('Title', 'Diste ' + event.type + ' en el botón "' + btn.text + '"', Ext.emptyFn);
        };

        var tapHandler = function(button, event) {
            mainPanel.setActiveItem(blue, {type: 'slide'});
        };

        var backHandler = function(button, event) {
            mainPanel.setActiveItem(green, {type: 'slide', direction: 'right'});
        };


        /*UI
        *********************************************************************************/

        var green = new Ext.Panel({
            dockedItems: [{
                xtype: 'toolbar',
                ui: 'light',
                title: 'My Toolbar',
                items: [{
                    text: 'Sobre App',
                    ui: 'round',
                    handler: showAlert
                }, { xtype:'spacer'}, {
                    text: 'Check-in',
                    ui: 'forward',
                    handler: tapHandler
                }]
            }],
            style: 'background-color:#3b7E3b',
            html: 'Green'
        });

        var blue = new Ext.Panel({
            dockedItems: [{
                xtype: 'toolbar',
                ui: 'light',
                title: 'Check-in',
                items: [{
                    text: 'Back',
                    ui: 'back',
                    handler: backHandler
                }]
            }],
            style: 'background-color:#3b3b7E',
            html: 'Blue'
        });

        var mainPanel = new Ext.Panel({
            layout: 'card',
            fullscreen : true,
            items: [green, blue]
        });
    }
});