TreePanel with an specific TreeStore

Question

I've got the flollowing issue:

I'm building a TreePanel with data of people but I don't know how to define the model of it without defineing : leaf, cls and text attributes. I wan't that "Name" would be the node text of each node .

My model is defined as following:

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

My TreeStore (for the moment with static data, but it will be load from an ajax call to the server that will return a list of server person model). Obviously I don't want to define leaf, text and cls attributes in my server model:

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

My TreePanel is defined as following:

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

Can anyone helps me to find the correct way to do this?

Thank you very much,

Juan

score 0 · Answer 1 · answered Sep 12 '12 at 10:32

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

Thank you very much Evan. We are in the correct way, but I still have the problem to said that all nodes are leaves and also how to specified the icon of the nodes. — Juan Ramón, Sep 12 '12 at 11:11

TreePanel with an specific TreeStore

1 Answers1