Кнопки со ссылками на новые панели в Sencha Touch

простите мою наивность здесь. Я пытаюсь сделать кнопки на панели инструментов ссылкой на новую карту, а не на панели вкладок. У новой карты будут другие элементы панели, чем у дома. Я просмотрел все видеоуроки и прочитал несколько статей здесь, но почему-то так и не смог разобраться.

new Ext.Application({
        name: 'Demo App',
        launch: function() {
        this.viewport = new Ext.TabPanel({
           fullscreen: true,
           id: 'mainPanel',
           html: 'Welcome',
           cls: 'homescreen',
           dockedItems: [{
              xtype: 'toolbar',
              ui: 'light',
              title: 'Home',
              items: [
                 {text: 'Option1', ui: 'action',  flex: 1},
                 {xtype: 'spacer', },
                 {text: 'Option2', ui: 'action',flex: 1 }
              ]
           }]
        }); 
    }
});

person Mayowa    schedule 14.06.2011    source источник
comment
@Jaitsu не уверен, что ты там редактировал.   -  person Mayowa    schedule 15.06.2011
comment
Я просто убедился, что код был отформатирован немного лучше   -  person JamesHalsall    schedule 15.06.2011


Ответы (1)


Это не совсем то, что нужно для панели вкладок. Предполагается загружать карты на главную панель и позволять перемещаться между ними. Вы можете загрузить новую полноэкранную панель (которая может иметь собственную панель вкладок или другие элементы), перехватив переключатель карты и визуализировав новую отдельную панель следующим образом:

new Ext.Application({
    name: 'Demo App',
    launch: function() {
        this.viewport = new Ext.TabPanel({
            fullscreen: true,
            id: 'mainPanel',
            cls: 'homescreen',
            items: [{
                title   : 'Home',
                html    : 'Welcome'
            },{
                title   : 'Full screen'
            }],
            listeners   : {
                beforecardswitch : function (ct, newcard, oldcard) {
                    if (newcard.title == 'Full screen') {
                        var panel = new Ext.Panel({
                            fullscreen  : true,
                            dockedItems : [{
                                xtype   : 'toolbar',
                                title   : 'Full screen',
                                dock    : 'top',
                            }],
                            html        : 'Full!'
                        });
                        return false;
                    } else {
                        return true;
                    }
                }
            }
        }); 
    }
});

Затем вам нужно будет как-то закрыть эту панель (возможно, кнопкой закрытия), чтобы пользователь мог вернуться к исходной панели вкладок. Хотя вам лучше оставить панель вкладок как есть и добавлять новые карты в панели внутри панели вкладок.

Надеюсь, что это ответ на ваш вопрос.

person Joel Nation    schedule 15.06.2011
comment
Это действительно должно работать. Спасибо! Нет ли способа заставить кнопку выполнять ту же операцию? - person Mayowa; 15.06.2011
comment
Да, просто поместите кнопку на панель карты, а затем создайте полноэкранную панель. Но это не то, что вы спросили. - person Joel Nation; 16.06.2011