Сенча Touch Slide

Question

Я начинаю использовать Sencha Touch и уже прочитал их руководство " Getting Started ", однако в настоящее время я застрял в том, что я хочу сделать, и не смог найти какой-либо подходящий учебник илипример того, что мне нужно.

Я хочу сделать панель так, чтобы при нажатии пользователем на определенную кнопку панель скользила, а панель инструментов сверху исчезала (или скользила также), а новая появлялась так же, какэто произойдет в собственном приложении 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]
        });
    }
});