2011-11-24 68 views
1

我已经定义了一个新的类“ConfirmationPanel”,我想在窗口内创建此面板。当我第一次创建窗口时它显示得很好。但是当我创建第二个窗口时,窗口1中的面板移动到窗口2。我想为每个窗口创建两次相同的面板。我怎样才能做到这一点?Ext JS - 多次创建相同的网格不起作用

Ext.define('MyApp.views.ConfirmationPanel', { 
    extend: 'Ext.grid.Panel', 
    requires: 'MyApp.store.ConfirmationStore', 
    border: false, 
    initComponent: function() { 
     this.store = Ext.create('MyApp.store.ConfirmationStore', {}); 
     this.columns = this.buildColumns(); 
     this.callParent(arguments); 
    }, 
    buildColumns: function() { 
     return [ 
      {text: "Id", width: 50, flex: 1, dataIndex: 'docId', sortable: true}, 
      {text: "Name", width: 150, dataIndex: 'docName', sortable: true}, 
      {text: "Type", width: 75, dataIndex: 'docType', sortable: true}, 
      {text: "URL", width: 115, dataIndex: 'docUrl', sortable: true}, 
      {text: "Sent Time", width: 115, dataIndex: 'docSentTime', sortable: true}, 
      {text: "Ack Time", width: 115, dataIndex: 'docAckTime', sortable: true} 
     ]; 
    }, 
    viewConfig: { 
     listeners: { 
      itemdblclick: function(dataview, record, item, index, e) { 
       alert('opening document here'); 
      } 
     } 
    } 
}); 

任何帮助/建议表示赞赏。

----我试着在tabpanel里面创建如下面板的新实例。但即便如此,它只创建了一个实例。也许我正在做一些基本错误的事情。

items: { 
     xtype:'tabpanel', 
     plain:true, 
     activeTab: 0, 
     height:350, 
     defaults:{ 
      bodyPadding: 10 
     }, 
     items: [ 
      { 
       title:'Test', 
       items: Ext.create('Ext.panel.Panel', { 
        bodyPadding: 5, 
        title: 'Filters', 
        items: [{ 
         xtype: 'datefield', 
         fieldLabel: 'Start date' 
        }, { 
         xtype: 'datefield', 
         fieldLabel: 'End date' 
        }] 
       }) 

      }, 
      { 
       title:'My Confirms', 
       items: Ext.create("MyApp.views.ConfirmationPanel") 
      } 
     ] 
    } 
+0

你能告诉我你是如何创建第二个ConfirmationPanel的姿态? –

+0

你能分享更多的代码吗?特别是你创建一个新窗口的地方。有时我看到类似的问题,当两个组件获得相同的Id。 –

回答

0

尝试

Ext.define('MyApp.views.ConfirmationPanel', { 
    ... 
    alias: 'confirmpanel', 
    ... 

和里面一个tabpanel:

 { 
      title:'My Confirms', 
      items: [{ 
       xtype: 'confirmpanel' 
      }] 
     } 

这种行为的原因,你得到的是因为在创建MyApp.views.ConfirmationPanel的只有一个实例你的设置通过Ext.create(“MyApp.views.ConfirmationPanel”)