在树形面板中双击应该在网格面板中添加 Extjs

Posted 2023-02-26

【中文标题】在树形面板中双击应该在网格面板中添加 Extjs

【英文标题】：Double click in treepanel should add in grid panel Extjs

【发布时间】：2013-07-20 19:52:15

【问题描述】：

我是 extjs 的新手，谁能帮帮我。

当我双击树面板中的一个项目时，它应该添加到网格面板中，而树面板中没有任何变化。

【参考方案1】：

您可以在树形面板上放置“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@***.com", phone: "345-2222",
                 text: "Laura", leaf: true, name: "Laura", email: "laura@***.com", phone: "345-3333"
            ] ,
             text: "Facebook Friend", expanded: true, children: [
                 text: "Steve", leaf: true, name: "Steve", email: "steve@***.com", phone: "345-2222",
                 text: "Lisa", leaf: true, name: "Lisa", email: "lisa@***.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":"[e-mail]",  "phone":"555-222-1234" ,
         'name': 'Homer', "email":"[e-mail]",  "phone":"555-222-1244"  ,
         'name': 'Marge', "email":"[e-mail]", "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()
);

【讨论】：

感谢您的快速回复。我会试试这个例子。