Question

我遇到了以下问题：

我正在构建一个包含人数据的TreePanel，但我不知道如何定义它的模型而不定义：leaf，cls和text属性。我不希望“名称”是每个节点的节点文本。

我的模型定义如下：

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
        }]
    });
});

TreePanel与特定的TreeStore

1 个答案: