在treepanel中雙擊應該添加在網格面板Extjs

Question

我是新來的extjs，任何人都可以幫助我。

當我雙擊樹面板中的一個項目時，它應該添加在網格面板中，而不會在treepanel中進行任何更改。

Answer 1

您可以在treepanel上放置'itemdblclick'事件的偵聽器，以便從項目的被雙擊的原始屬性中獲取數據。然後，通過引用底層網格的商店，只需使用商店的「loadRawData」方法追加該數據對象即可。以下是基於Sencha網站示例的代碼示例：

var store = Ext.create('Ext.data.TreeStore', { 
    root: { 
     expanded: true, 
     children: [ 
      { text: "School Friends", expanded: true, children: [ 
       { text: "Mike", leaf: true, name: "Mike", email: "mike@stackoverflow.com", phone: "345-2222"}, 
       { text: "Laura", leaf: true, name: "Laura", email: "laura@stackoverflow.com", phone: "345-3333"} 
      ] }, 
      { text: "Facebook Friend", expanded: true, children: [ 
       { text: "Steve", leaf: true, name: "Steve", email: "steve@stackoverflow.com", phone: "345-2222"}, 
       { text: "Lisa", leaf: true, name: "Lisa", email: "lisa@stackoverflow.com", phone: "345-3333"} 
      ] }, 
     ] 
    } 
}); 

Ext.create('Ext.tree.Panel', { 
    title: 'All My Friends', 
    width: 200, 
    height: 150, 
    store: store, 
    rootVisible: false, 
    renderTo: Ext.getBody(), 
    listeners : { 
      itemdblclick : function(tree, record, index){ 
       Ext.getStore('simpsonsStore').loadRawData([record.raw], true); 
      } 
    } 
}); 

Ext.create('Ext.data.Store', { 
    storeId:'simpsonsStore', 
    fields:['name', 'email', 'phone'], 
    data:{'items':[ 
     { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, 
     { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, 
     { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } 
    ]}, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'items' 
     } 
    } 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Best Friends', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [ 
     { text: 'Name', dataIndex: 'name' }, 
     { text: 'Email', dataIndex: 'email', flex: 1 }, 
     { text: 'Phone', dataIndex: 'phone' } 
    ], 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
});