Sencha Touch Slide

Question

我开始使用Sencha Touch并且已经阅读了他们的“Getting Started”gide，但是我目前陷入了我想做的事情并且无法找到任何正确的教程或示例我需要。

我想制作一个面板，以便当用户点击特定按钮时，面板会滑动并且顶部的工具栏也会消失（或者也会滑动），而新的工具会出现就像在原生iOS应用上发生的那样。

到目前为止，这是我的Sencha代码：

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

要在单击按钮时进行卡片转换，请使用处理程序中的setActiveItem方法：

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