Динамическое дерево в ExtJS modern

В данной статье пойдет речь о том, как создать динамическое дерево (TreeList) в ExtJS Modern. Возможно данная реализация есть в «коробке», но я ее не нашел.

Стандарный компонент treelist отлично работает, если в хранилище находится например 100 записей, но если их будет тысяча или более? У меня получилось так, что мобильный телефон стал заметно тормозить. И после долгих поисков решения в интернете, решил доработать компонент.

Первое что я сделал — это создал наследник от treelist

Ext.define('MobileService.view.routeList.items.MobileTreeList', {
    extend: 'Ext.list.Tree',
    xtype: 'mobiletreelist',
 
    privates: {
        // expand - стоит строить дочернии элементы или нет. По умолчанию null
        createItem: function (node, parent, expand) {
            var isRootItem = node.get('isRootItem'); // требуется для определения корневого элемента (те записи которые видит пользователь на первом уровне)
            if (!isRootItem && !expand)
                return null;
 
            return this.callParent(arguments);
        },
        // переопределен. Основной метод для добавления дочерних элементов
        onNodeExpand: function (node) {
            var item = this.getItem(node);
            var childNodes = node.childNodes;
            for (i = 0, len = childNodes.length; i < len; ++i) {
                child = childNodes[i];
                if (!this.itemMap[child.internalId]) {
                    var _item = item.getOwner().createItem(child, item, true);
                    if (_item) {
                        this.itemMap[child.internalId] = _item;
                        item.insertItem(_item, null);
                    }
                }
            }
            this.callParent(arguments);
        }
    }
});

Второе, создаем наследник от Ext.list.TreeItem

/*
 * для вывода дерево документов и строк я создал собственный класс для TreeItem
 */
Ext.define('MobileService.view.routeList.items.RouteListItem', {
    extend: 'Ext.list.TreeItem',
    xtype: 'routelistitem',
 
    privates: {
        updateNode: function (node) {
            if (node) {
                var me = this,
                    map = me.itemMap,
                    childNodes, owner, len, i, item, child;
                me.element.dom.setAttribute('data-recordId', node.internalId);
                if (!map) {
                    childNodes = node.childNodes;
                    owner = me.getOwner();
                    me.itemMap = map = {};
                    for (i = 0, len = childNodes.length; i < len; ++i) {
                        child = childNodes[i];
                        item = owner.createItem(child, me);
                        if (item) { // добавили проверку на возможность создания ветки
                            map[child.internalId] = item;
                            me.insertItem(item, null);
                        }
                    }
                }
                me.setExpanded(node.isExpanded());
                me.doNodeUpdate(node);
            }
        }
    }
});

Третье, создаем данные для хранилища

var root = {
    expanded: true,
    children: [
        {
            text: 'item1',
            isRootItem: true,
            children: [
                ....
            ]
        },
        {
            text: 'item1',
            isRootItem: true,
            children: [
                ....
            ]
        }
    ]
};
var store = Ext.create('Ext.data.TreeStore', {
            root: root
});

Наконец и сам компонент

                xtype: 'mobiletreelist',
                height: '100%',
                defaults: {
                    xtype: 'routelistitem'
                }

Вроде все, должно работать. Все дочернии элементы будут отрисовывать динамически

Ext JS 6.0.0.640