Сенсорные сенсорные панели Sencha

Question

Я только недавно начал использовать Sencha Touch, и до сих пор я построил это:
app.js:

Ext.regApplication({
    name: 'app',
    launch: function() {
        this.launched = true;
        this.mainLaunch();
    },
    mainLaunch: function() {
        if (!device || !this.launched) {return;}
        this.views.viewport = new this.views.Viewport();
    }
});

Viewport.js:

app = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    sortable: false,
    tabBar: {
        dock: 'bottom',
        layout: {pack: 'center'}
    },
    cardSwitchAnimation: {
        type: 'slide',
        cover: true
    },
    initComponent: function() {
        Ext.apply(app.views, {
            searchListTab: new app.views.SearchListTab(),
            searchTab: new app.views.SearchTab(),
            mapTab: new app.views.MapTab(),
            infoTab: new app.views.InfoTab()
        });
        Ext.apply(this, {
            items: [
                app.views.searchTab,
                app.views.mapTab,
                app.views.infoTab
            ]
        });
        app.views.Viewport.superclass.initComponent.apply(this, arguments);
    }

});

SearchTab.js

app.views.SearchTab = Ext.extend(Ext.Panel, {
    title: 'Search',
    iconCls: 'search',
    dockedItems: [{
        xtype: 'toolbar',
        title: 'Search'
    }],
    items: [
        {
            xtype: 'button',
            ui: 'round',
            text: 'Hledej',
            listeners: {
                tap: function() {
                    Ext.dispatch({
                        controller: app.controllers.main,
                        action: 'search',
                        animation: {type:'slide', direction:'right'}
                    });
                }
            }
        }
    ],
    initComponent: function() {
        app.views.SearchTab.superclass.initComponent.apply(this, arguments);
    }
});

SearchListTab.js

app.views.SearchListTab = Ext.extend(Ext.Panel, {
    title: 'Search',
    iconCls: 'search',
    dockedItems: [{
        xtype: 'toolbar',
        title: 'Search Results'
    }],
    items: [{
        xtype: 'list',
        store: app.stores.results,
        itemTpl: '{titul}',
        grouped: false
        //onItemDisclosure: function (record) {
            //Ext.dispatch({
            //    controller: app.controllers.contacts,
            //    action: 'show',
            //    id: record.getId()
            //});
        //}
    }],
    initComponent: function() {
        app.stores.results.load();
        app.views.SearchListTab.superclass.initComponent.apply(this, arguments);
    }
});

и search.js

app.controllers.main = new Ext.Controller({

    search: function(options) {
        app.views.searchTab.setActiveItem(
            app.views.searchListTab, options.animation
        );
    }

});

и некоторые другие вещи, которые сейчас не важны. Так что в основном у меня есть основной видовой экран, который представляет собой панель вкладок, затем несколько панелей, которые являются его элементами, и одна панель, которая нигде не существует с самого начала. Теперь я хочу добиться, чтобы при нажатии кнопки в searchTab я хотел, чтобы панель searchTab менялась на панель searchListTab. Проблема заключается в том, когда я использую app.views.viewport.setActiveItem (...); он работает нормально, но добавляет новую вкладку на панель вкладок. Я просто хочу, чтобы текущая панель вкладок переместилась на другую панель, но когда я использую код, который я разместил здесь - app.views.searchTab.setActiveItem (...); это ничего не делает.
Что я делаю не так? Спасибо.

Answer 1

Я думаю, что вам нужно будет ввести еще один уровень вложенности, чтобы достичь этого.

Я думаю, что вы хотите вложить вашу SearchTab в другую Ext.Panel с макетом карты и добавить ваш SearchListTab на эту панель, когда это необходимо, а затем вы можете использовать метод setActiveItem () для перемещения по нему. Это будет держать вашу панель Tab видимой при перемещении между вложенными представлениями на вкладке.

Я нарисовал маленькую диаграмму, чтобы попытаться объяснить это лучше! Черный ящик - это новая панель, которую, я думаю, вам следует добавить, которая заменит SearchTab как элемент, непосредственно добавленный в TabPanel.

Надеюсь, это поможет и понятно!