Extjs 4, Dynamic Tree and store re-mapping

Question

I need to Extjs Tree panel with dynamic remote data(JSON) for file listing.

and the date field name is not fit to Extjs tree store field. so I need to re-mapping to make fit, like adding leaf field and text field.

the return JSON data is like this:

[{
   "id":1,
   "yourRefNo":"A91273",
   "documentName":"Test Document",
   "documentFileName":"login_to_your_account-BLUE.jpg",
   "updatedBy":"root root",
   "updatedAt":"\/Date(1343012244000)\/"
}]

and this is the tree panel:

Ext.define('App.view.Document.DocumentList', {
    extend :'Ext.tree.Panel',
    rootVisible : false,
    alias: 'widget.Document_list',
    store: 'DocumentList_store'

});

and this is the store:

Ext.define('App.store.DocumentList_store', {
    extend: "Ext.data.TreeStore",
    model: 'App.model.DocumentList_model',
    proxy: {
        type: 'ajax',
        url: '/Document/GetDocumentList/',
        actionMethods: {
            read: 'POST'
        },
        reader: {
            type: 'json',
            root: '' // there is no root
        },
        pageParam: undefined,
        startParam: undefined,
        pageParam: undefined
    },
    root: {
        children: []
    },
    autoLoad: false,
    listeners: {
        append: function (thisNode, newChildNode, index, eOpts) {
            console.log(newChildNode.get('documentName')); // 'Test Document'
            newChildNode.set('leaf', true);
            newChildNode.set('text', newChildNode.get('documentName'));
            // it does not add to tree panel. 

        }
    }
});

after load data from server, and it call the append function well. but after that, nothing show up in tree panel.

What I am doing wrong? please advice me.

Thanks

[EDIT]

This is the model,

Ext.define("App.model.DocumentList_model", {
    extend: "Ext.data.Model",
    fields: [
        'id','yourRefNo','documentName','documentFileName','updatedBy','updatedAt'
    ]
});

There are a few things that can go wrong with your code. It would be useful to see your model definition to give you a full answer. But for now, I think you ignore the fact that a tree store wraps your nodes with `NodeInterface`. Given this, the json you return is not valid with a tree. For startes, you must provide a root node. There are more things to look at, but that's a start. If you provide your model definition we'll be able to help further. — Izhaki, Jul 24 '12 at 09:49
@Izhaki I added my model at the end of my question, could you review my question again please? thank you for your help! — Expert wanna be, Jul 24 '12 at 17:30

score 1 · Accepted Answer · answered Jul 24 '12 at 21:03

I'm fusing your code with a piece of working code of mine. Try see if this works:

Model:

Ext.define("App.model.DocumentList_model", {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id'},
        {name: 'yourRefNo'},
        {name: 'documentName' }, 

        {name: 'documentFileName'},
        {name: 'updatedBy'},
        {name: 'updatedAt', convert: function(v) { return v;} }, // Notice you can do field conversion here

        {name: 'leaf', type: 'boolean', defaultValue: false, persist: false},
    ],

    proxy: {
        type: 'ajax',
        url: '/Document/GetDocumentList/',
        actionMethods: {
            read: 'POST'
        },
        reader: {
            type: 'json',
            root: 'children' 
        },
    },    
});

Store:

Ext.define('App.store.DocumentList_store', {
    extend: "Ext.data.TreeStore",
    model: 'App.model.DocumentList_model',

    root: {
        text: 'Root',
        id: null,
        expanded: true
    },

    autoLoad: false,
});

JSON Response:

{
    "success":true,
    "children":[{
        "id":1,
        "yourRefNo":"A91273",
        "documentName":"Test Document",
        "documentFileName":"login_to_your_account-BLUE.jpg",
        "updatedBy":"root root",
        "updatedAt":"\/Date(1343012244000)\/",
        "leaf":false
     }]
}

Thank you! it works,but I had to change the documentName to 'text' in JSON Response. — Expert wanna be, Jul 25 '12 at 03:12

Extjs 4, Dynamic Tree and store re-mapping

1 Answers1