Extjs 4 MVC TabPanel - 糟糕的渲染標籤

請幫助我。我正在使用MVC創建一個TabPanel。在渲染面板添加選項卡時。這是兩個視圖和控制器的代碼。結果是一張扭曲的圖片。標籤的標題被繪製兩次：在頂部和底部（拉伸到全屏）。當我在控制器功能addNewTab改變（）的行：; 到另一「tp.add（{標題」tp.add（{的xtype 'MYTAB'}）顯示（）。「：」新選項卡'，html：'MVC新選項卡示例'}）。show（）;「，然後一切都呈現正確。我將非常感謝您的幫助。Extjs 4 MVC TabPanel - 糟糕的渲染標籤

Views: 
Ext.define('MY.view.Tab', { 
    extend: 'Ext.tab.Tab', 
    alias: 'widget.mytab', 
    initComponent: function() { 
     this.title = 'new Tab'; 
     this.html = 'MVC New Tab Example'; 
     this.callParent(arguments); 
    } 
}); 

Ext.define('MY.view.TabPanel', { 
    extend: 'Ext.tab.Panel', 
    alias: 'widget.mytabpanel', 
    initComponent: function() { 
     this.id = 'MYTabPanel'; 
     this.callParent(arguments); 
    } 
}); 


Controller: 
Ext.define('MY.controller.TabPanel', { 
    extend: 'Ext.app.Controller', 
    requires: ['MY.view.Tab'], 
    init: function() { 
     this.control({ 
      '#MYTabPanel': { 
       render: this.addNewTab 
      } 
     }); 
    }, 
    addNewTab: function(tp) { 
     tp.add({xtype: 'mytab'}).show(); //it work bad 
     //tp.add({title: 'new Tab', html: 'MVC New Tab Example'}).show(); //it work good 
    } 
});

來源

2013-07-01 Oleg

您的mytab類延伸Ext.tab.Tab。這意味着此代碼tp.add({xtype: 'mytab'}); 正在添加Tab作爲TabPanel的主視圖。將爲添加到選項卡面板的每個面板或容器自動創建一個選項卡，並且該選項卡僅由視圖頂部的按鈕式組件組成。

這意味着，當調用上面的代碼，一個Tab創建並被推入TabPanel作爲視圖，則TabPanel創建另一個另一個Tab使用相同的標題，並將其附加到Tab剛添加的頂。

此代碼tp.add({title: 'new Tab', html: 'MVC New Tab Example'})'作品，因爲你實際上是增加了panel（由分機使用的默認xtype是面板）和TabPanel使用您所提供的標題爲您創建標籤。

修復：使MY.view.Tab擴展Panel而不是Tab。如果您只想自定義特定視圖的標籤，請深入探索Ext.tab.Panel的源代碼，並查看可以添加到TabPanel項目的未記錄的tagConfig屬性。

來源

2013-07-02 03:58:59 wantok

是的，我意識到我的錯誤！非常感謝您的幫助！ – Oleg

Extjs 4 MVC TabPanel - 糟糕的渲染標籤

回答

相關問題