具有特定 TreeStore 的 TreePanel

Question

我有以下问题：

我正在构建一个包含人员数据的 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": "user@domain.com", 
                "BirthDate":"19801205"
            },
            {
                "Name":"Marta", 
                "Surname":"Hoz", 
                "Email": "user2@domain.com", 
                "BirthDate":"19831210"
            }
    }
});

我的 TreePanel 定义如下：

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

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

非常感谢，

胡安

Answer 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": "user@domain.com",
                "BirthDate": "19801205"
            }, {
                "Name": "Marta",
                "Surname": "Hoz",
                "Email": "user2@domain.com",
                "BirthDate": "19831210"
            }]
        }
    });

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