View Full Version : ExtJs 4 How to extend the HTML DOM node of a TreeNode with custom attributes?

31 Jan 2012, 7:40 AM

for several hours I've been trying to append some user-defined HTML attributes to multiple, distinct tree nodes (or, to be more exact, the HTML nodes visually representing them). The tree is populated with data via AJAX, making use of the "Ext.data.TreeStore" class.

I just tried to accomplish this by creating a hook to the "append" listener, so that I can modify the nodes as they are appended to the tree. But unfortunately, I could not find any function or property that returns the HTML element.

Does somebody please have a hint for me or would point me into the right direction?

var csMamFileTreeStore = Ext.create('Ext.data.TreeStore', {
model: 'cs.MamFile.tree',
proxy: {
type: 'ajax',
url : csVars.extServiceUrl + csVars.account + '&action=treeFolder',
reader: {
listeners: {
* @param Ext.data.NodeInterface (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.data.NodeInterface) _this This node
* @param Ext.data.NodeInterface (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.data.NodeInterface) node The newly appended node
* @param Number index The index of the newly appended node
* @param Object eOpts The options object passed to Ext.util.Observable.addListener (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.util.Observable-method-addListener).
append: function(_this, node, index, eOpts) {
console.log('TreeStore_event_append: ', _this, node, index, eOpts);

Thanks in advance,
Marco Walther

13 Feb 2012, 12:11 AM
Still no hints, anyone?

13 Feb 2012, 12:45 AM
You should probably look in TreeView, not TreeStore to see how you can add additional markup. Changing stuff in the store/model will only allow you to tamper with the data, strings, css classes etc.

Ext.define('Ext.tree.View', {
extend: 'Ext.view.Table',
alias: 'widget.treeview',