ExtJS - Custom column generator on TreeGrid not starting

Question

I have ExtJS TreeGrid and I'm trying to add my own renderer to a specific column. Unfortunately, it does not work - the event does not start and no warnings are issued. I could not find the API for TreeGrid. Has anyone else experienced this?

Here is the code:

var tree = new Ext.ux.tree.TreeGrid({ title: 'My Tree Grid', loader: treeLoader, columns:[{ header: 'Title', dataIndex: 'title', width: 500 },{ header: 'Testing', width: 100, dataIndex: 'testing', renderer: function(value) { console.log('Test'); }, align: 'center' }] }); 

Thanks!

Answer 1

There is no API for TreeGrid since it is a user extension (Ext.ux). For more information, you need to take a look at the source code. If you do not have a source in your project, go to the following page:

http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

and press "View Source" Ctrl + U From there you can go to TreeGrid.js and other js supporting files.

I noticed that TreeGrid extends the TreePanel , which in turn extends the plain old Panel . There seems to be no reference to the GridPanel , so I don't think there is any column renderer, as you would expect if you used this component. From what I'm compiling, the example (tree-grid.js) instead uses an XTemplate to display the column data:

  var tree = new Ext.ux.tree.TreeGrid({ title: 'Core Team Projects', width: 500, height: 300, renderTo: Ext.getBody(), enableDD: true, columns:[{ header: 'Task', dataIndex: 'task', width: 230 },{ header: 'Duration', width: 100, dataIndex: 'duration', align: 'center', sortType: 'asFloat', // ================================== // // this acts as your column renderer tpl: new Ext.XTemplate('{duration:this.formatHours}', { formatHours: function(v) { if(v < 1) { return Math.round(v * 60) + ' mins'; } else if (Math.floor(v) !== v) { var min = v - Math.floor(v); return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm'; } else { return v + ' hour' + (v === 1 ? '' : 's'); } } }) // ================================== // },{ header: 'Assigned To', width: 150, dataIndex: 'user' }], dataUrl: 'treegrid-data.json' }); 

Try using XTemplate for your goals. If this does not meet your needs, you need to provide additional information.