MVC Sencha Touch將無法正確顯示選項卡面板

我有一個MVC Sencha Touch應用程序我正在構建，並有一些問題讓TabPanel正常工作。問題是這樣的，當我有我的PosViewport.js這樣，一切正常：MVC Sencha Touch將無法正確顯示選項卡面板

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內容。

這是怎麼回事？我完全不知道爲什麼它的行爲如此。任何在正確方向的指針都非常感謝，謝謝！而你需要這些面板的兩個實例

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

：

來源

2011-11-03 Ian

聽起來就像你得到一個JavaScript異常。嘗試在Chrome控制檯打開的情況下運行它，以便您可以看到任何錯誤。 –

@JasonFreitas，謝謝你的迴應！不幸的是，在任何情況下都沒有javascript錯誤 – Ian

在第二種情況下，你創建了兩個班的這一點。所以，添加這樣的項目：

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

這應該現在工作。並從這些面板中刪除fullscreen:true選項。 fullscreen的意思是，它將使面板佔據整個視區。

來源

2011-11-04 07:52:55 Swar

你絕對正確！實例化這些類而不是引用它們可以很好地工作。感謝您的幫助！ – Ian

MVC Sencha Touch將無法正確顯示選項卡面板

回答

相關問題