TreePanel generated from TreeStore

Apparently, generating a treePanel from a treeStore is not 'out-of-the-box' like generating a grid or even generating tree from static json in Ext-JS.

In addition, at the moment there are not a many examples out there that explains how it should be done. Most of the examples are using a static JSON (memory). But what if you are using a store with an already-made JSON which you need to customize to be a tree?

listeners to the rescue
The way to make it happen, is to alter the store a bit.
we start by defining a store as usual:


Ext.define('MyTreeStore', {
extend: 'Ext.data.TreeStore',

config: {
someConfig: 0
},

constructor: function (cfg) {
var me = this;

cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyTreeStoreID',
root: {
expanded: true
},
proxy: {
type: 'rest',
url: 'http://website/JsonGenerator.php'
extraParams: {
someCoolConfig: 1
},
reader: {
type: 'json'
},
// Don't want proxy to include these params in request
pageParam: undefined,
startParam: undefined
},
fields: ['JSONField_ID', 'JSONField_NAME'],

// ------------------------------------------------------------------------
// this is the important part:

listeners: {
append: function (thisNode, newChildNode, index, eOpts) {
if (!newChildNode.isRoot()) {
newChildNode.set('leaf', true);
newChildNode.set('text', newChildNode.get('JSONField_NAME'));
}
}
}

// ------------------------------------------------------------------------

}, cfg)]);
}
});

Comments

Popular posts from this blog

pip install pymssql fails with 'sqlfront.h': No such file or directory

ASP.NET 2.0 with MySQL 4.1.2 - unicode problem

NLP Toolkit (Made for self use - but feel free to use it too :) )