0

我试图在 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 上创建一种新类型的小部件（使用属性“别名”），但它没有用。

有人有解决方案吗？

4

2 回答 2

2

您的第二次尝试即将完成，但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

于 2012-10-23T16:03:36.957 回答
0

对于多个标签：

 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'
           }
       ]
   });
于 2013-07-26T06:33:37.983 回答