ExtJs 4.1 TreeGrid treecolumn custom renderer

Question

Is it possible to merge 2 columns in TreeGrid, when one of them is xtype 'treecolumn'?

For now I have 2 separate columns, one is standard treecolumn, second is templatecolumn with custom template (basically an image)

now it looks like this

What I would like to get should look like this:

what I'm trying to do

So that second column content is added to first but aligned to right.

I have no idea how to even start with that kind of renderer :(

This is code for my columns so far:

{
    xtype : 'treecolumn',
    text : 'Dział/Pracownik',
    width : 200,
    sortable : true,
    hideable: false,
    dataIndex : 'Name',
    renderer: function (v, m, r) {
        if(r.get('leaf')==true)
            m.tdAttr = 'data-qtip="<img src=services/Images.ashx?login='+r.get('login')+' width=60px height=60px>"';
            return v;
    }
},
{
    text : 'Zdj', 
    width: 40, 
    align : 'center', 
    dataIndex : 'Name', 
    sortable : false, 
    resizable: false,
    xtype : 'templatecolumn', 
    tpl : imgTpl
},
...
var imgTpl = Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<tpl if="values.leaf == true">',
        '<img src="services/Images.ashx?login={login}" width="25px" height="25px"/>',
    '</tpl>',
    '</tpl>'
);

I will really be gratefully for any hints on how to merge those 2 columns.

dbrin dbrin · Accepted Answer · 2012-07-17T06:01:58

Here is what I ended up doing with that:

 renderer:function (value, meta, record) {
                    var tasks = record.get("tasks"),
                        tpl =     this.taskImgTpl,
                        type, qtip;
                    if (tasks && tasks.length >0){
                        Ext.each(tasks, function(task){
                            if(task.refType) {
                                type = task.refType;
                            } else {
                                type = task.type.name;
                            }
                            qtip = Ext.String.format('Status:  {0}  Assignee:  {1}  %Complete:  {2}',task.state,task.assignee||'',task.pctComplete);
                            value += tpl.apply([type, qtip]);
                        },this);
                    }

                    return value;
                }

And the image template that is being inserted is :

taskImgTpl:new Ext.XTemplate(" &nbsp; &nbsp;  <img class='{0} h16' width='16px' data-qtitle='{0}' data-qwidth='120' data-qtip='{1}'/>")

where h16 is a class that gives height:16px, and the dynamically inserted class carries a background image (16x16) of whatever the type of object is being displayed. You of course can just set the src attribute instead.

ExtJs 4.1 TreeGrid treecolumn custom renderer

2 Answers