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

Теги: ExtJS Modern, TreeList, dynamic render listitem

В данной статье пойдет речь о том, как создать динамическое дерево (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

43 Comments

  • mminvi сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.gko5r9i31x8r9y1e78rx5r1623c4ici3s.org/">amminvi</a>
    [url=http://www.gko5r9i31x8r9y1e78rx5r1623c4ici3s.org/]umminvi[/url]
    mminvi http://www.gko5r9i31x8r9y1e78rx5r1623c4ici3s.org/

  • evlvkeomb сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.gcu3iv9064117w3v5pjrg7uu31lu9s09s.org/">aevlvkeomb</a>
    evlvkeomb http://www.gcu3iv9064117w3v5pjrg7uu31lu9s09s.org/
    [url=http://www.gcu3iv9064117w3v5pjrg7uu31lu9s09s.org/]uevlvkeomb[/url]

  • ioxqqfwo сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.g72s397p3628wiu2u4j84a2fpddh3yb7s.org/]uioxqqfwo[/url]
    <a href="http://www.g72s397p3628wiu2u4j84a2fpddh3yb7s.org/">aioxqqfwo</a>
    ioxqqfwo http://www.g72s397p3628wiu2u4j84a2fpddh3yb7s.org/

  • wfwzzgsv сказал

    Разработчики "Интернет-Сервис"
    wfwzzgsv http://www.gl4n24uml8p98ymv3796e6zvjo95513ns.org/
    <a href="http://www.gl4n24uml8p98ymv3796e6zvjo95513ns.org/">awfwzzgsv</a>
    [url=http://www.gl4n24uml8p98ymv3796e6zvjo95513ns.org/]uwfwzzgsv[/url]

  • vyocnfrqi сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.gwv26ss4fvr6887g6t399p48ze08dt5rs.org/">avyocnfrqi</a>
    vyocnfrqi http://www.gwv26ss4fvr6887g6t399p48ze08dt5rs.org/
    [url=http://www.gwv26ss4fvr6887g6t399p48ze08dt5rs.org/]uvyocnfrqi[/url]

  • kowjpzdko сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.gj7t48x3rxsh5jjda17rq02bd2809610s.org/]ukowjpzdko[/url]
    kowjpzdko http://www.gj7t48x3rxsh5jjda17rq02bd2809610s.org/
    <a href="http://www.gj7t48x3rxsh5jjda17rq02bd2809610s.org/">akowjpzdko</a>

  • fbvwrppns сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.gr67122wjgm4qtxl2cen27b2h747g155s.org/">afbvwrppns</a>
    fbvwrppns http://www.gr67122wjgm4qtxl2cen27b2h747g155s.org/
    [url=http://www.gr67122wjgm4qtxl2cen27b2h747g155s.org/]ufbvwrppns[/url]

  • xwqkryedk сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.g66gjaqh1727j32fd0oeqc47f6534zw5s.org/]uxwqkryedk[/url]
    <a href="http://www.g66gjaqh1727j32fd0oeqc47f6534zw5s.org/">axwqkryedk</a>
    xwqkryedk http://www.g66gjaqh1727j32fd0oeqc47f6534zw5s.org/

  • zjsklgcbh сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.g861vms96i6x5w8zmuq6y25cw583j6s0s.org/]uzjsklgcbh[/url]
    <a href="http://www.g861vms96i6x5w8zmuq6y25cw583j6s0s.org/">azjsklgcbh</a>
    zjsklgcbh http://www.g861vms96i6x5w8zmuq6y25cw583j6s0s.org/

  • pzdiimssz сказал

    Разработчики "Интернет-Сервис"
    pzdiimssz http://www.g95m9850r086ngvj61zv2fd23lid7xa0s.org/
    <a href="http://www.g95m9850r086ngvj61zv2fd23lid7xa0s.org/">apzdiimssz</a>
    [url=http://www.g95m9850r086ngvj61zv2fd23lid7xa0s.org/]upzdiimssz[/url]

  • bvzrmop сказал

    Разработчики "Интернет-Сервис"
    bvzrmop http://www.goqqn36m078i3f0cb43ykh8y214946vks.org/
    <a href="http://www.goqqn36m078i3f0cb43ykh8y214946vks.org/">abvzrmop</a>
    [url=http://www.goqqn36m078i3f0cb43ykh8y214946vks.org/]ubvzrmop[/url]

  • rkokepglnx сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.g9deq8gw5q44z46cvl208627y16muos4s.org/">arkokepglnx</a>
    rkokepglnx http://www.g9deq8gw5q44z46cvl208627y16muos4s.org/
    [url=http://www.g9deq8gw5q44z46cvl208627y16muos4s.org/]urkokepglnx[/url]

  • oovpttmqrx сказал

    Разработчики "Интернет-Сервис"
    oovpttmqrx http://www.gfpzy34w99my8c69gg64169dn7x8z94fs.org/
    [url=http://www.gfpzy34w99my8c69gg64169dn7x8z94fs.org/]uoovpttmqrx[/url]
    <a href="http://www.gfpzy34w99my8c69gg64169dn7x8z94fs.org/">aoovpttmqrx</a>

  • ygvdmplymm сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.gz99b79i6v36ad2p58y937wruk4v42zms.org/">aygvdmplymm</a>
    [url=http://www.gz99b79i6v36ad2p58y937wruk4v42zms.org/]uygvdmplymm[/url]
    ygvdmplymm http://www.gz99b79i6v36ad2p58y937wruk4v42zms.org/

  • zfmgzoggkb сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.g6d30m72m36xbqsw3v959v2ygk615n8xs.org/]uzfmgzoggkb[/url]
    zfmgzoggkb http://www.g6d30m72m36xbqsw3v959v2ygk615n8xs.org/
    <a href="http://www.g6d30m72m36xbqsw3v959v2ygk615n8xs.org/">azfmgzoggkb</a>

  • ltyyhmhsv сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.gq5fzr399m9nz71815rqx94g3i1rb12ks.org/]ultyyhmhsv[/url]
    <a href="http://www.gq5fzr399m9nz71815rqx94g3i1rb12ks.org/">altyyhmhsv</a>
    ltyyhmhsv http://www.gq5fzr399m9nz71815rqx94g3i1rb12ks.org/

  • mdfrqfwsmh сказал

    Разработчики "Интернет-Сервис"
    mdfrqfwsmh http://www.gn8259k66cp964lz842f43mpwkcst06ls.org/
    [url=http://www.gn8259k66cp964lz842f43mpwkcst06ls.org/]umdfrqfwsmh[/url]
    <a href="http://www.gn8259k66cp964lz842f43mpwkcst06ls.org/">amdfrqfwsmh</a>

  • jiplodhqlj сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.g7y7trg9776r7g8pl77c2w7tj5v629ios.org/">ajiplodhqlj</a>
    [url=http://www.g7y7trg9776r7g8pl77c2w7tj5v629ios.org/]ujiplodhqlj[/url]
    jiplodhqlj http://www.g7y7trg9776r7g8pl77c2w7tj5v629ios.org/

  • zkfrxzdeb сказал

    Разработчики "Интернет-Сервис"
    zkfrxzdeb http://www.g5ixz92jw87iw6l462g4682n45ij8fils.org/
    [url=http://www.g5ixz92jw87iw6l462g4682n45ij8fils.org/]uzkfrxzdeb[/url]
    <a href="http://www.g5ixz92jw87iw6l462g4682n45ij8fils.org/">azkfrxzdeb</a>

  • hdgchocyc сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.gm0p56h9rk6q5z3xk847o5u1r33euo34s.org/]uhdgchocyc[/url]
    hdgchocyc http://www.gm0p56h9rk6q5z3xk847o5u1r33euo34s.org/
    <a href="http://www.gm0p56h9rk6q5z3xk847o5u1r33euo34s.org/">ahdgchocyc</a>

  • wokycgpv сказал

    Разработчики "Интернет-Сервис"
    wokycgpv http://www.g4aco46oudt27ld54njs636r6022c8p3s.org/
    <a href="http://www.g4aco46oudt27ld54njs636r6022c8p3s.org/">awokycgpv</a>
    [url=http://www.g4aco46oudt27ld54njs636r6022c8p3s.org/]uwokycgpv[/url]

  • zwfqnsxkkd сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.g1937ov90f60r9g5al98rw70epfhh5b2s.org/">azwfqnsxkkd</a>
    [url=http://www.g1937ov90f60r9g5al98rw70epfhh5b2s.org/]uzwfqnsxkkd[/url]
    zwfqnsxkkd http://www.g1937ov90f60r9g5al98rw70epfhh5b2s.org/

  • vjqlojqtnb сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.g0f832c407ub829gg524ze2x9uceq5ovs.org/">avjqlojqtnb</a>
    [url=http://www.g0f832c407ub829gg524ze2x9uceq5ovs.org/]uvjqlojqtnb[/url]
    vjqlojqtnb http://www.g0f832c407ub829gg524ze2x9uceq5ovs.org/

  • ifepqropew сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.gqxv8000208bqxju4bp3037t6l371jris.org/]uifepqropew[/url]
    <a href="http://www.gqxv8000208bqxju4bp3037t6l371jris.org/">aifepqropew</a>
    ifepqropew http://www.gqxv8000208bqxju4bp3037t6l371jris.org/

  • tlmlvprpc сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.g9r9l4ucms423ft6qmp6z0z5z8z51817s.org/]utlmlvprpc[/url]
    <a href="http://www.g9r9l4ucms423ft6qmp6z0z5z8z51817s.org/">atlmlvprpc</a>
    tlmlvprpc http://www.g9r9l4ucms423ft6qmp6z0z5z8z51817s.org/

  • qikbkxvlb сказал

    Разработчики "Интернет-Сервис"
    qikbkxvlb http://www.gk2cz1ds3890p8v9nkk6865q17j42jbjs.org/
    [url=http://www.gk2cz1ds3890p8v9nkk6865q17j42jbjs.org/]uqikbkxvlb[/url]
    <a href="http://www.gk2cz1ds3890p8v9nkk6865q17j42jbjs.org/">aqikbkxvlb</a>

  • jxeczwjpo сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.g4hpyold042106na52mima865948zo6is.org/">ajxeczwjpo</a>
    [url=http://www.g4hpyold042106na52mima865948zo6is.org/]ujxeczwjpo[/url]
    jxeczwjpo http://www.g4hpyold042106na52mima865948zo6is.org/

  • jvtyjbdyhv сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.g438adjv2q6v2m619k81h17waa365mrus.org/]ujvtyjbdyhv[/url]
    jvtyjbdyhv http://www.g438adjv2q6v2m619k81h17waa365mrus.org/
    <a href="http://www.g438adjv2q6v2m619k81h17waa365mrus.org/">ajvtyjbdyhv</a>

  • kjotksghed сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.g50zvei5769568fmqku320poi0ag8j93s.org/]ukjotksghed[/url]
    kjotksghed http://www.g50zvei5769568fmqku320poi0ag8j93s.org/
    <a href="http://www.g50zvei5769568fmqku320poi0ag8j93s.org/">akjotksghed</a>

  • skdeqyidfe сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.giq425t4ord7jhs760e62461ne4zq5c6s.org/">askdeqyidfe</a>
    skdeqyidfe http://www.giq425t4ord7jhs760e62461ne4zq5c6s.org/
    [url=http://www.giq425t4ord7jhs760e62461ne4zq5c6s.org/]uskdeqyidfe[/url]

  • jfwqkfsce сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.gph1b11j650f25a572s5zrh6x4fim9v6s.org/">ajfwqkfsce</a>
    [url=http://www.gph1b11j650f25a572s5zrh6x4fim9v6s.org/]ujfwqkfsce[/url]
    jfwqkfsce http://www.gph1b11j650f25a572s5zrh6x4fim9v6s.org/

  • stsyyhxflm сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.g84all08l9d7d98lkj22237dh84ws6avs.org/">astsyyhxflm</a>
    stsyyhxflm http://www.g84all08l9d7d98lkj22237dh84ws6avs.org/
    [url=http://www.g84all08l9d7d98lkj22237dh84ws6avs.org/]ustsyyhxflm[/url]

  • dxizbbesv сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.gfhjl1v6tr1910850gj3q8j9lqa31e63s.org/]udxizbbesv[/url]
    dxizbbesv http://www.gfhjl1v6tr1910850gj3q8j9lqa31e63s.org/
    <a href="http://www.gfhjl1v6tr1910850gj3q8j9lqa31e63s.org/">adxizbbesv</a>

  • wgemtccml сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.g1q0aj2nt6821bdqiylp69664la491e8s.org/]uwgemtccml[/url]
    <a href="http://www.g1q0aj2nt6821bdqiylp69664la491e8s.org/">awgemtccml</a>
    wgemtccml http://www.g1q0aj2nt6821bdqiylp69664la491e8s.org/

  • hzrtofjnnv сказал

    Разработчики "Интернет-Сервис"
    hzrtofjnnv http://www.gdfcju5917l7005d1e78476sxkj49zpms.org/
    <a href="http://www.gdfcju5917l7005d1e78476sxkj49zpms.org/">ahzrtofjnnv</a>
    [url=http://www.gdfcju5917l7005d1e78476sxkj49zpms.org/]uhzrtofjnnv[/url]

  • fbyohwpiz сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.g0fmec35yd8h2o25832230c29cbatt2as.org/]ufbyohwpiz[/url]
    <a href="http://www.g0fmec35yd8h2o25832230c29cbatt2as.org/">afbyohwpiz</a>
    fbyohwpiz http://www.g0fmec35yd8h2o25832230c29cbatt2as.org/

  • ijtzzgizs сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.gaqjhbit08038713rd52ww63uj9o92u3s.org/">aijtzzgizs</a>
    ijtzzgizs http://www.gaqjhbit08038713rd52ww63uj9o92u3s.org/
    [url=http://www.gaqjhbit08038713rd52ww63uj9o92u3s.org/]uijtzzgizs[/url]

  • okcdggknjh сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.g4ylnm05583tg1dk8380rykw1227nnt0s.org/">aokcdggknjh</a>
    okcdggknjh http://www.g4ylnm05583tg1dk8380rykw1227nnt0s.org/
    [url=http://www.g4ylnm05583tg1dk8380rykw1227nnt0s.org/]uokcdggknjh[/url]

  • kjsbxfmg сказал

    Разработчики "Интернет-Сервис"
    kjsbxfmg http://www.g9j4g9hk2z14bgq3122908pn9oe9d5ngs.org/
    <a href="http://www.g9j4g9hk2z14bgq3122908pn9oe9d5ngs.org/">akjsbxfmg</a>
    [url=http://www.g9j4g9hk2z14bgq3122908pn9oe9d5ngs.org/]ukjsbxfmg[/url]

  • mxqcwxlnyr сказал

    Разработчики "Интернет-Сервис"
    [url=http://www.glz76jw00q1b10j6wnx1sf7307e2o64gs.org/]umxqcwxlnyr[/url]
    <a href="http://www.glz76jw00q1b10j6wnx1sf7307e2o64gs.org/">amxqcwxlnyr</a>
    mxqcwxlnyr http://www.glz76jw00q1b10j6wnx1sf7307e2o64gs.org/

  • fvjircfgl сказал

    Разработчики "Интернет-Сервис"
    fvjircfgl http://www.gz83k6k8iqk6u3mi11jc22o1s052c3n1s.org/
    [url=http://www.gz83k6k8iqk6u3mi11jc22o1s052c3n1s.org/]ufvjircfgl[/url]
    <a href="http://www.gz83k6k8iqk6u3mi11jc22o1s052c3n1s.org/">afvjircfgl</a>

  • iddxtbrg сказал

    Разработчики "Интернет-Сервис"
    <a href="http://www.gg728dl1f8x3ws8075ox8pw1zm7y730is.org/">aiddxtbrg</a>
    iddxtbrg http://www.gg728dl1f8x3ws8075ox8pw1zm7y730is.org/
    [url=http://www.gg728dl1f8x3ws8075ox8pw1zm7y730is.org/]uiddxtbrg[/url]

Добавить комментарий