Как правильно настроить узлы дерева Ext JS?

Question

Ext JS 4. У меня есть tree.Panel, где я хочу отображать пользовательский HTML в каждом узле, сгенерированный из данных модели этого узла. Я могу сделать это, установив text для узла при загрузке магазина, но разметка не является задачей модели. Поэтому я создал пользовательский Column, который отображает мой HTML.

Моя проблема: если я не получаю вывод из Ext.tree.Column, он не будет отображаться должным образом (нет контуров, значки плюс / минус и т. Д.). Если я это сделаю, все в порядке, но Ext.tree.Column помечен как закрытый для Ext JS.

Есть ли официально поддерживаемый API, чтобы делать то, что я хочу?

Answer 1

Я написал сообщение в блоге о том, как настроить панель дерева ExtJS 4, надеюсь, это поможет: http://hardtouse.com/blog/?p=24

Идея состоит в том, чтобы использовать рендерер в сочетании с МНОГО CSS-магии:

columns : [{
    xtype : 'treecolumn',
    dataIndex : 'name',
    renderer : function(value, record){
        return Ext.String.format('<div class="tree-font">{0}</div>', value);
    }]

Answer 2

Спасибо за ваш ответ выше. Вот еще один пример, показывающий еще несколько вариантов форматирования:

columns: [{
    xtype: 'treecolumn',
    dataIndex: 'text',
    flex: 1,
    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
        // see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Column-cfg-renderer
        var tooltipString = "Hello";
        metaData.tdAttr = 'data-qtip="' + tooltipString + '"';
        return Ext.String.format('{0} <span style="color:red;">{1}</span>', value, record.data.personname);
    }
}]

Вы также можете добавить

hideHeaders : true, 

в конфигурацию панели дерева, чтобы удалить заголовок "grid", который появляется в результате использования столбца дерева.

Мюррей