treecolumn renderer with icon - 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; 
     } 

Это выглядит хорошо, но для длинных имен я получаю нежелательный вид:

Looking thrue кода, который я нашел некоторые нежелательная разметка:

Что мне нужно почти идентичный рендерер, как в стандартной treecolumn, но мне нужно добавить дополнительную иконку справа от этой колонки - миниатюра изображения сотрудника.

Я искал через документы, и я обнаружил, что есть частная собственность называется 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 это служба, которая принимает логин и возвращает изображение.
Простое решение, надеюсь, что это поможет кому-то :)