Sencha Touch Slide

Je commence à utiliser le Sencha Touch et ont déjà lu leur "Prise En Main" de gide, mais je suis actuellement bloqué dans ce que je veux faire et que vous n'avez pas été en mesure de trouver un bon tutoriel ou un exemple de ce dont j'ai besoin.

Je veux faire un panneau de sorte que lorsqu'un utilisateur clique sur un bouton du panneau de diapositives et de la barre d'outils en haut disparaît (ou diapositives) et un nouveau apparaissent juste comme cela se produirait sur un natif de l'application iOS.

Voici mon Sencha code de la mesure:

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

OriginalL'auteur Tsundoku | 2011-01-04

  1. 6

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

    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 jamais vous changez l'ordre des cartes et les indices de changement).

    Votre barre d'outils est ancrée à l'extérieur du conteneur, de ne pas les cartes, de sorte qu'il ne change pas lorsque vous modifiez les cartes. Vous pourriez quai deux différentes barres d'outils de la carte des panneaux à la place si vous voulais que ça change (ou de modifier par programmation, je suppose).

    Vous pouvez également utiliser le "spacer" du type de diffusion de vos boutons en dehors de chaque côté de l'outil. Voici votre code ajusté à faire ce que je pense, vous voulez probablement (sur le téléphone uniquement, 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]
        });
    }
});
    exactement ce que je voulais faire! merci beaucoup! Je sens que j'ai été vous dérange par divers moyens (Twitter) désolé =/

    OriginalL'auteur James Pearce