Изменение отображения нодов в TreePanel в ExtJS 4

[betazold]

Встала задача: кастомно отображать элементы дерева, возможно, по некоторому условию. Можно, конечно, повесить обработчик на событие load у TreeStore и рекурсивно обработать каждый узел, после чего сделать ему commit, однако это решение обладает рядом недостатков:

• Тормозит поток UI
• По сути вторично выполняет уже сделанную самим экстом работу по выводу дерева

В ExtJS 3 это делалось обычно оверрайдом метода createNode у TreeLoader, но в четверке он был безжалостно удален, а на смену ему пришли TreeView и TreeColumn. Немного поразмыслив и просмотрев код, я решил менять именно последнюю. Она вначале вызывает оригинальный рендерер, если таковой задан, поэтому нам ничего не мешает задать его. Итак, пишем в initComponent нашего дерева следующее:

    initComponent : function () {
        var me = this,
            root,
            originalRenderer,
        me.callParent(arguments);
        root = me.getRootNode();
        originalRenderer = me.columns[0].renderer;
        me.columns[0].renderer = function (value, metaData, node, rowIdx, colIdx, store, view) {
            var text = node.get('clean_text') || node.get('text'),
                firstRender = !node.get('first_render'),
                count = node.get('user_count'),
                countText = '(' + count + '',
                ifCountText = '{0}',
                nodeData = node[node.persistenceProperty];
            if (node !== root) {
                value = text + ' ' + (count ? Ext4.String.format(ifCountText, countText) : countText);
                Ext4.apply(nodeData, {
                    iconCls    : 'users',
                    clean_text : text,
                    text       : value
                });
                if (firstRender) {
                    Ext4.apply(nodeData, {
                        expanded     : !closedPath[node.getPath()],
                        first_render : true
                    });
                }
            }
            return originalRenderer.apply(me, arguments);
        }
        return me;
    }

Я пользуюсь "песочницей", поскольку в проекте совместно живут четвертый и второй экст. В своей задаче вместо Ext4 вы будете, конечно же, пользоваться просто Ext. Работа непосредственно с внутренней структорой нода нужно потому, что каждый set вызывает рендер, в результате чего после долгого ожидания скрипт отваливается по рекурсии. Также, если встает задача сразу развернуть все дерево (у меня реализован прелоад всех узлов), нужно установить expanded в true только в первый раз, т.к. сворачивание/разворачивание - изменением модели и, соответственно, новый вызов рендеринга, для чего и сделаны пляски с добавлением флажка в модель нода.