带有大型复杂对象或动态加载对象的Extjs tabpanel

Tabpanel上的复杂对象存在一些问题。我有2个设有专卖店，橱窗，网格，树木复杂的对象等。下面是对象的开头：带有大型复杂对象或动态加载对象的Extjs tabpanel

Ext.define('Ext.app.DocumentsContainer', { 

    extend: 'Ext.container.Container', 

    initComponent: function(){ 

     var documentsStore = Ext.create('Ext.data.Store', {

而且我有2片（每对象）一个tabpanel。视口的完整的代码与一个tabpanel：

Ext.create('Ext.container.Viewport', { 
     layout: 'border', 
     padding: '5', 
     items: [ 
      { 
       xtype: 'container', 
       region: 'north', 
       height: 50 
      }, 
      { 
       xtype: 'tabpanel', 
       activeTab: 0, 
       region: 'center', 
       width: 100, 
       items: [ 
       { 
        xtype: 'panel', 
        title: 'Documents', 
        layout: 'border', 
        items: Ext.create('Ext.app.DocumentsContainer'), 
       },{ 
        xtype: 'panel', 
        title: 'Transmittals', 
        layout: 'border', 
        items: [Ext.create('Ext.app.TransmittalsContainer')], 
       }] 
      } 
     ], 
    });

当我测试我的页面时，有一个问题，因为在一个网格对象dysplays莫名其妙的数据在另一个对象，或犯规dysplay的。但是这两个对象一次只能正常工作。我认为，我可以通过在打开标签页时动态加载对象来修复它，但不知道该如何去做。有什么建议吗？

来源

2011-07-14 Evgeniy Timchenko

不知道你的两个组件的内部Ext.app.DocumentsContainer和Ext.app.TransmittalsContainer不能可靠地回答你的问题。也许你将相同的ID分配给两个不同的内部组件 - 这通常是混合数据的原因。

其次，Frederic是正确的 - 你是过分的你的组件。 tabpanel中的两个面板都是不必要的，因为您可以将组件直接放入tabpanel，如Frederic所示。但是，如果您坚持要保留面板，请尝试将layout更改为fit，因为该布局类型可处理单个项目组件（调整单个组件的大小以适合父框架）。

来源

2011-07-14 07:25:08

第二天，我试图找到双'ID'，但仅限于检查后，我已经创建它的文章:)它只是关于第十次检查:) –

你正在让tabpanel过度。 tabpanels项目将自动拉伸他们的内容。所以它可能只适用于你。

取而代之。更改DocumentContainer到PE面板（所以它可以有一个标题。）

Ext.define('Ext.app.DocumentsContainer', { 

    extend: 'Ext.panel.Panel', 

    initComponent: function(){ 

     var documentsStore = Ext.create('Ext.data.Store', {

并改变你的TabPanel了这一点。我也删除了你的中心区域的宽度。中心区域自动填充剩余的边界布局空间。

Ext.create('Ext.container.Viewport', { 
     layout: 'border', 
     padding: '5', 
     items: [ 
      { 
       xtype: 'container', 
       region: 'north', 
       height: 50 
      }, 
      { 
       xtype: 'tabpanel', 
       activeTab: 0, 
       region: 'center', 
       items: [ 
        Ext.create('Ext.app.DocumentsContainer', {title:'Documents'}), 
        Ext.create('Ext.app.TransmittalsContainer', {title:'Transmittals'}) 
       ] 
      } 
     ], 
    });

另外。正如Stefan所说。永远不要在你的ExtJS4代码中使用id。他们是邪恶的，最终会让你的结果变得糟糕。 itemId或只是简单的Ext.DomQuery是做到这一点的方法。

来源

2011-07-14 07:20:10 Fredric

感谢您的咨询。我已经将“容器”更改为“面板”，并将它保存到一个嵌套层次。是的，'身份证'是邪恶:) –

带有大型复杂对象或动态加载对象的Extjs tabpanel

回答

相关问题