ExtJs 4.1 TreeGrid treecolumn custom renderer - extjs4.1

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)
What I would like to get should look like this:
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.

Answer 1

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(" <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.

Answer 2

What I have done is instead using template I've used renderer, so my column now looks like this:
{
xtype : 'treecolumn',
text : 'Employee',
width : 200,
sortable : true,
hideable : false,
dataIndex : 'Name',
renderer : function(v, m, r) {
if (r.get('leaf')) {
return '<div style="float: left">'
+ r.get('Name')
+ '</div><img data-qtip="<img src=services/Images.ashx?login='
+ r.get('login')
+ ' width=60px height=60px/>" src="services/Images.ashx?login='
+ r.get('login')
+ '" width="25px" height="25px" style="float: right; margin-right: 5px"/>';
}
return '<div style="float: left">' + r.get('Name') + '</div>';
}
}
If element is leaf then I display extra image in the right of my column + I've added bigger image after rollover.
To have this working I had to change some css inside ext-all.css:
.x-grid-with-row-lines .x-tree-icon{margin-top:1px; float: left}
.x-grid-with-row-lines .x-tree-elbow,.x-grid-with-row-lines .x-tree-elbow-end,.x-grid-with-row-lines .x-tree-elbow-plus,.x-grid-with-row-lines .x-tree-elbow-end-plus,.x-grid-with-row-lines .x-tree-elbow-empty,.x-grid-with-row-lines .x-tree-elbow-line{height:19px;background-position:0 -1px; float: left}
I had to add float:left to all images that are displayed in that cell:
x-tree-elbow
x-tree-elbow-end
x-tree-elbow-plus
x-tree-icon
I know that this can be optimised a lot, but for me it works fine. If some ExtJS guru could tweak it to work better then you're welcome :)