EXT JS 4.1 如何在 tabPanel 中显示网格答案

【问题标题】：EXT JS 4.1 how to display a grid in tabPanelEXT JS 4.1 如何在 tabPanel 中显示网格
【发布时间】：2012-10-23 14:43:46
【问题描述】：

我正在尝试在 tabPanel（对象 Ext.tab.Panel）中显示一个网格（EXTJS 4.1 的对象 Ext.grid.GridPanel），但我遇到了问题：网格作为独立的源代码完美地工作，而面板也可以作为独立的源代码工作。但是当我尝试让网格和面板一起工作时，它不起作用。

网格：

 var monGridPanelDetailEcriture = new Ext.grid.GridPanel({
    id: 'monGridPanelDetailEcriture',
    frame: true,
    width: 1100,
    autoHeight: true,
    renderTo: 'gridDetailEcriture',
    store: monStoreDetailEcriture,
    columns: mesColonnesDetailEcriture
});

标签面板：

var tabs = Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
    width: 450,
    activeTab: 0,     // first tab initially active
    defaults :{
        bodyPadding: 10
    },
    items: [{
        title: 'Short Text',
        closable: true
    },{
        title: 'Long Text'
    }]
});

我在互联网上搜索解决方案，但每次我发现都不起作用：我尝试了这个在几个论坛上解释过的解决方案：

var tabs = Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
    width: 450,
    activeTab: 0,     // first tab initially active
    defaults :{
        bodyPadding: 10
    },
    items: [{
        monGridPanelDetailEcriture 
    },{
        title: 'Long Text'
    }]
});

但我有一个 Javascript 错误，表明这不是描述项目的方式。

我还尝试在 Grid 上创建一种新类型的小部件（使用“别名”属性），但没有成功。

有人有解决方案吗？

【问题讨论】：

标签： extjs grid tabpanel

【解决方案1】：

您的第二次尝试即将完成，但 monGridPanelDetailEcriture 已经是一个对象，您不需要将其包装在 {} 中。

因此以下应该起作用：

var tabs = Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
    width: 450,
    activeTab: 0,     // first tab initially active
    defaults :{
        bodyPadding: 10
    },
    items: [
        monGridPanelDetailEcriture
    ]
});

编辑：您可能也不希望在您的网格上使用 renderTo，因为它会在您的选项卡面板中呈现。编辑-编辑：另外，我认为在你的 renderTo 中使用 Ext.getBody() 可能是更好的做法，而不是 document.body。好像多了Ext'y

【讨论】：

非常感谢它完美地工作！并感谢您的建议，我将应用它。

【解决方案2】：

对于多个标签：

 var tabs = Ext.create('Ext.tab.Panel', {

     renderTo: document.body,
     width: 450,
     activeTab: 0,     // first tab initially active
     defaults :{
          bodyPadding: 10
      },
    items: [
          monGridPanelDetailEcriture,
          {
           title:'tab2',
           html:'I m tab 2'
           }
       ]
   });

【讨论】：