ExtJs 4.1 TreeGrid樹列自定義渲染器

Question

是否有可能在TreeGrid中合併2列，當其中一個是xtype'treecolumn'？

現在我有2個單獨的列，一個是標準的treecolumn，二是TemplateColumn中使用自定義模板（基本圖像）

我想獲得應該是這樣的：

因此，第二列內容被添加到第一列，但對齊到右側。

我不知道如何甚至那種渲染:(開始

這是我的專欄到目前爲止的代碼：

{ 
    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>' 
); 

我真的會感激地對任何提示如何合併這2列

Answer 1

我所做的是不是使用模板我使用的渲染器，所以我列現在看起來是這樣的：

{ 
    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>'; 
    } 
} 

如果元素是葉然後我在我的專欄+我的右邊顯示額外的圖像翻轉後增加了更大的圖像。

要有這方面的工作，我不得不改變EXT-all.css裏面一些CSS：

.X-電網與排線.X樹圖標{邊距：1px的; float：left} .x-grid-with-row-lines .x-tree-elbow，.x-grid-with-row-lines .x-tree-elbow-end，.x-grid-with-row-行.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;浮動：左}

我不得不添加浮動：左到被顯示在小區內的所有圖片：

• X樹肘
• X-樹肘端
• X樹肘加
• X樹圖標

我知道，這可以優化了不少，但對我來說它的工作原理精細。如果一些ExtJS大師可以調整它工作更好，那麼你不受歡迎:)

Answer 2

這裏是我結束了，這樣做：

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; 
       } 

且被插入的圖像的模板是：

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

其中H16是一個類，給出高度：16px的，並且動態插入的類進行任何的正被顯示的對象的類型的背景圖像（16×16）。你當然可以直接設置src屬性。