具有特定 TreeStore 的 TreePanel

Posted 2023-02-26

【中文标题】具有特定 TreeStore 的 TreePanel

【英文标题】：TreePanel with an specific TreeStore

【发布时间】：2012-09-12 10:20:33

【问题描述】：

我有以下问题：

我正在构建一个包含人员数据的 TreePanel，但我不知道如何在不定义的情况下定义它的模型：叶子、cls 和文本属性。我不希望“名称”成为每个节点的节点文本。

我的模型定义如下：

Ext.define('People', 
     extend: 'Ext.data.Model',
     fields: [
         name: 'Name', type: 'string',
         name: 'Surname',  type: 'string',
         name: 'Email',       type: 'string'
         name: 'BirthDate',  type: 'string'
     ]
);

我的 TreeStore（目前是静态数据，但它将从 ajax 调用加载到服务器，该服务器将返回服务器人员模型列表）。显然我不想在我的服务器模型中定义叶子、文本和 cls 属性：

Ext.create('Ext.data.TreeStore', 
    root: 
        expanded: true,
        children: [
            
                "Name":"Juan", 
                "Surname":"Hoz", 
                "Email": "[e-mail]", 
                "BirthDate":"19801205"
            ,
            
                "Name":"Marta", 
                "Surname":"Hoz", 
                "Email": "[e-mail]", 
                "BirthDate":"19831210"
            
    
);

我的 TreePanel 定义如下：

Ext.create('Ext.tree.Panel', 
    id: 'treePersonId',
    store: mystore,
    hideHeaders: true,
    rootVisible: false,
    title: 'Persons',
    collapsible: true,
    resizable:true
);

谁能帮我找到正确的方法？

非常感谢，

胡安

【参考方案1】：

Ext.define('Person', 
    extend: 'Ext.data.Model',
    fields: [
        name: 'Name',
        type: 'string'
    , 
        name: 'Surname',
        type: 'string'
    , 
        name: 'Email',
        type: 'string'
    , 
        name: 'BirthDate',
        type: 'string'
    ]
);

Ext.require('*');

Ext.onReady(function() 
    var store = Ext.create('Ext.data.TreeStore', 
        model: 'Person',
        root: 
            expanded: true,
            children: [
                "Name": "Juan",
                "Surname": "Hoz",
                "Email": "[e-mail]",
                "BirthDate": "19801205"
            , 
                "Name": "Marta",
                "Surname": "Hoz",
                "Email": "[e-mail]",
                "BirthDate": "19831210"
            ]
        
    );

    Ext.create('Ext.tree.Panel', 
        renderTo: document.body,
        store: store,
        hideHeaders: true,
        rootVisible: false,
        columns: [
            xtype: 'treecolumn',
            dataIndex: 'Name',
            flex: 1
        ]
    );
);

【讨论】：

非常感谢埃文。我们的方法是正确的，但是我仍然有问题说所有节点都是叶子以及如何指定节点的图标。