MVC Sencha Touch не будет правильно отображать панели вкладок - PullRequest
Новая
       11

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

0 голосов
/ 04 ноября 2011

У меня есть приложение 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, давайте переместим их в два отдельных файла:

View1.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-контента вообще.

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

1 Ответ

1 голос
/ 04 ноября 2011

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

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

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

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

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

...