Question

我试图在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
});

TabPanel：

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上创建一种新类型的小部件（使用属性“alias”），但它不起作用。

有人有解决方案吗？

Answer 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，因为它会在你的标签面板中呈现。 EDIT-EDIT：另外，我认为在你的renderTo中使用Ext.getBody（）而不是document.body可能是更好的做法。似乎有点Ext'y

Answer 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'
           }
       ]
   });

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

2 个答案: