帶有圖標的樹列渲染器 - extjs 4.2.1

Question

我使用Ext Scheduler（http://www.bryntum.com/products/scheduler/）構建簡單的應用程序。 我正在嘗試爲treecolumn添加自定義渲染器，這個自定義渲染器將會在樹中有人的圖標。

我創建渲染該列：

renderer: function (v, m, r) { 
      if (r.get('leaf')) { 
       return '<div style="float: left">' + 
        r.get('Name') + 
        '</div>'+ 
        '<img data-qtip="<img src=iconUrl.png width=60px height=60px/>" '+ 
        'src="iconUrl.png" '+ 
        'width="20px" height="20px" style="float: right; margin-right: 5px"/>'; 
      } 
      return v; 
     } 

這看起來不錯，但對於長的名字，我得到不必要的樣子：

尋找thrue代碼中，我發現了一些不需要的標記：

我需要什麼與標準樹列幾乎是相同的渲染器，但我需要在該列右側添加額外的圖標 - 員工圖像縮略圖。

我想要搜索的文檔，我發現有一個名爲cellTpl（http://docs.sencha.com/extjs/4.2.1/source/Column2.html#Ext-tree-Column）

，但我不知道我應該怎麼改變這一點，我應該改變這種不惜一切私有財產因爲它被標記爲私人的頂部。

我應該如何更改該渲染器才能獲得最後一張圖像的效果？

下面是一些的jsfiddle發揮：http://jsfiddle.net/Misiu/gwFdr/

Answer 1

我最終延伸到Ext.tree.Column，而不是正常的葉圖標它顯示縮略圖。
這裏是我的代碼：

Ext.define('Grafik.component.tree.Column2', { 
    extend: 'Ext.tree.Column', 
    alias: 'widget.treecolumn2', 

    thumbnailsServiceUrl:'', 

    cellTpl: [ 
     '<tpl for="lines">', 
      '<img src="{parent.blankUrl}" class="{parent.childCls} {parent.elbowCls}-img ', 
      '{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>"/>', 
     '</tpl>', 
     '<img src="{blankUrl}" class="{childCls} {elbowCls}-img {elbowCls}', 
      '<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>"/>', 
     '<tpl if="checked !== null">', 
      '<input type="button" role="checkbox" <tpl if="checked">aria-checked="true" </tpl>', 
       'class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"/>', 
     '</tpl>', 
     '<img src="{loginUrl}" class="{childCls} {baseIconCls} ', 
      '{baseIconCls}-<tpl if="leaf">leaf<tpl else>parent</tpl> {iconCls}"', 
      '<tpl if="icon">style="background-image:url({icon})"</tpl>/>', 
     '<tpl if="href">', 
      '<a href="{href}" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>', 
     '<tpl else>', 
      '<span class="{textCls} {childCls}">{value}</span>', 
     '</tpl>' 
    ], 


    treeRenderer: function (value, metaData, record, rowIdx, colIdx, store, view) { 
     var me = this, 
      cls = record.get('cls'), 
      renderer = me.origRenderer, 
      data = record.data, 
      parent = record.parentNode, 
      rootVisible = view.rootVisible, 
      lines = [], 
      parentData; 

     if (cls) { 
      metaData.tdCls += ' ' + cls; 
     } 

     while (parent && (rootVisible || parent.data.depth > 0)) { 
      parentData = parent.data; 
      lines[rootVisible ? parentData.depth : parentData.depth - 1] = 
        parentData.isLast ? 0 : 1; 
      parent = parent.parentNode; 
     } 

     return me.getTpl('cellTpl').apply({ 
      record: record, 
      baseIconCls: me.iconCls, 
      iconCls: data.iconCls, 
      icon: data.icon, 
      checkboxCls: me.checkboxCls, 
      checked: data.checked, 
      elbowCls: me.elbowCls, 
      expanderCls: me.expanderCls, 
      textCls: me.textCls, 
      leaf: data.leaf, 
      expandable: record.isExpandable(), 
      isLast: data.isLast, 
      blankUrl: Ext.BLANK_IMAGE_URL, 
      loginUrl: data.leaf ? me.thumbnailsServiceUrl + record.get('Login') : Ext.BLANK_IMAGE_URL, 
      href: data.href, 
      hrefTarget: data.hrefTarget, 
      lines: lines, 
      metaData: metaData, 
      // subclasses or overrides can implement a getChildCls() method, which can 
      // return an extra class to add to all of the cell's child elements (icon, 
      // expander, elbow, checkbox). This is used by the rtl override to add the 
      // "x-rtl" class to these elements. 
      childCls: me.getChildCls ? me.getChildCls() + ' ' : '', 
      value: renderer ? renderer.apply(me.origScope, arguments) : value 
     }); 
    } 
}); 

和使用情況是這樣的：

{ 
    text: 'Users', 
    dataIndex: 'Name', 
    hideable: false, 
    width: 260, 
    xtype: 'treecolumn2', 
    sortable: true, 
    resizable: false, 
    thumbnailsServiceUrl: window.appUrl + 'api/Thumbnails/' 
} 

哪裏api/Thumbnails是服務，需要登錄並返回圖像。
簡單的解決方案，希望它可以幫助別人:)