CODEWITHSUNDEEP
extjs
user300285
user300285

Reputation:

ExtJS - Custom Column Renderer on TreeGrid isn't being fired

I have an ExtJS TreeGrid and I'm trying to add a custom renderer to a particular column. Unfortunately it's not working - the event isn't being fired and no warnings are given off. I couldn't find the API for the TreeGrid either. Has anyone else experienced this?

Here's 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!

Upvotes: 5

Views: 5903

Answers (1)

McStretch
McStretch

Reputation: 20645

There is no API for TreeGrid because it's a user extension (Ext.ux). You'll have to take a look at the source code for more information. If you don't have the source in your project, go to the following page:

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

and hit "View Source" Ctrl + U. From there you can link to TreeGrid.js and the other supporting js files.

I noticed that TreeGrid extends TreePanel, which in turn extends plain old Panel. There doesn't appear to be any reference to GridPanel, so I don't believe there is any column renderer as you'd expect if you were using that component. From what I gather, the example (tree-grid.js) instead uses an XTemplate for rendering 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 an XTemplate for your purposes. If this doesn't meet your needs you'll have to provide more information.

Upvotes: 4

Related Questions