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

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 🙂