Sencha Touch Slide

Question

Je commence à utiliser Sencha Touch et j'ai déjà lu leur " Pour commencer "Cependant, je suis actuellement bloqué dans ce que je veux faire et je n'ai pas été en mesure de trouver un bon tutoriel ou un exemple de ce dont j'ai besoin.

Je veux créer un panneau de sorte que lorsqu'un utilisateur clique sur un bouton spécifique, le panneau glisse et la barre d'outils du haut disparaît (ou glisse également) et une nouvelle barre apparaît, comme cela se produirait dans une application iOS native.

Voici mon code Sencha jusqu'à présent :

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

Pour assurer la transition de la carte lorsque vous cliquez sur un bouton, utilisez la méthode setActiveItem dans votre gestionnaire :

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

Il peut également prendre une référence au composant du panneau directement (ce qui est utile si vous changez l'ordre des cartes et que les indices changent).

Votre barre d'outils est ancrée au conteneur extérieur, et non aux cartes, de sorte qu'elle ne change pas lorsque vous changez de carte. Si vous voulez qu'elle change, vous pouvez attacher deux barres d'outils différentes aux panneaux des cartes (ou la modifier par programme, je suppose).

Vous pouvez également utiliser le type "espaceur" pour répartir vos boutons de chaque côté de l'outil. Voici votre code ajusté pour faire ce que je pense que vous voulez probablement (sur le téléphone seulement, pour plus de clarté)

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]
        });
    }
});