slide - Sencha Touch 幻灯片

Question

我开始使用 Sencha Touch 并且已经阅读了他们的“Getting Started”指南，但是我目前停留在我想做的事情上并且无法找到我需要的任何合适的教程或示例.

我想制作一个面板，以便当用户单击特定按钮时，面板滑动并且顶部的工具栏消失(或滑动)，然后出现一个新的面板，就像在 native 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);
};

它还可以直接引用面板组件(如果您更改了卡片的顺序并且索引也发生了变化，这将很有用)。

您的工具栏停靠到外部容器，而不是卡片，因此当您更换卡片时它不会改变。如果您希望更改它(或者我想以编程方式更改它)，您可以将两个不同的工具栏停靠到卡片面板。

您还可以使用“间隔器”类型将按钮分散到工具的每一侧。这是您的代码，已调整为执行我认为您可能想要的操作(为清楚起见，仅在电话上)

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