MVC Sencha Touch не будет правильно отображать панели вкладок

У меня есть приложение MVC Sencha Touch, которое я создаю, и у меня возникают проблемы с правильной работой TabPanel. Проблема в том, что когда у меня такой PosViewport.js, все работает нормально:

touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
    console.log("inside initComponent() of PosViewport.js");
    touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
    dock: 'bottom',
    layout: {
        pack: 'center'
    }
},
layout: 'fit',
scroll: 'vertical',
items: [
    {
        title: 'Reciepts',
        iconCls: 'bookmarks',
        html: 'one'
    },
    {
        title: 'POS',
        iconCls: 'Favorites',
        html: 'two'
    }
]
});

Здесь все отлично! Панель вкладок отображается внизу, она идеально подходит, и я могу без проблем переключаться между ними.

Однако вместо того, чтобы хранить эти панели в моем файле PosViewport.js, давайте переместим их в два отдельных файла:

Вид1.js:

touch.views.View1 = new Ext.extend(Ext.Panel, {
initComponent: function () {
    touch.views.View1.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: 'Reciepts',
iconCls: 'bookmarks',
html: 'panel one'
});

и View2.js:

touch.views.View2 = new Ext.extend(Ext.Panel, {
initComponent: function () {
    touch.views.View2.superclass.initComponent.call(this);
},
layout: 'fit',
scroll: 'vertical',
fullscreen : true,
title: '2',
iconCls: 'bookmarks',
html: 'panel two'
});

Я добавляю оба новых представления в свой index.html. Теперь я обновляю свой PosViewport.js, чтобы указывать на новые представления:

touch.views.PosViewport = new Ext.extend(Ext.TabPanel, {
initComponent: function () {
    console.log("inside initComponent() of PosViewport.js");
    touch.views.PosViewport.superclass.initComponent.call(this);
},
tabBar: {
    dock: 'bottom',
    layout: {
        pack: 'center'
    }
},
layout: 'fit',
scroll: 'vertical',
items: [ touch.views.View1, touch.views.View2]
});

И все идет к черту. Нижняя панель вкладок не видна, так как на странице видна только крошечная часть верхней части. Панели вообще не отображаются, я вообще не вижу их HTML-содержимого.

Что здесь происходит? Я совершенно не понимаю, почему он так себя ведет. Любые указатели в правильном направлении очень ценятся, спасибо!


model-view-controller tabpanel sencha-touch
person Ian    schedule 03.11.2011    source источник
comment
Похоже, вы получаете исключение JavaScript. Попробуйте запустить его в Chrome с открытой консолью JavaScript, чтобы увидеть все ошибки.   -  person Jason Freitas    schedule 04.11.2011
comment
@JasonFreitas, спасибо за ответ! К сожалению, ни в одной из ситуаций нет ошибок javascript.   -  person Ian    schedule 04.11.2011

Ответы (1)


arrow_upward
1
arrow_downward

Во втором случае вы создали два класса:

touch.views.View2 = new Ext.extend(Ext.Panel, {          // Class definition

тогда как вам нужно два экземпляра этих панелей. Итак, добавьте такие элементы:

items: [new touch.views.View1(), new touch.views.View2()]   // Panel instance

Теперь это должно работать. И удалите опцию fullscreen:true с этих панелей. fullscreen означает, что панели будут занимать всю область просмотра.

person Swar    schedule 04.11.2011
comment
Вы абсолютно правы! Создание экземпляров классов вместо ссылки на них работало отлично. Спасибо за помощь! - person Ian; 04.11.2011