CODEWITHSUNDEEP
extjsextjs4treepanel
Expert wanna be
Expert wanna be

Reputation: 10624

Extjs 4, Dynamic Tree and store re-mapping

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

Upvotes: 0

Views: 8892

Answers (1)

Izhaki
Izhaki

Reputation: 23586

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

Upvotes: 1

Related Questions