странное поведение extjs treepanel после нажатия на +, чтобы развернуть

Я строю древовидную панель, и когда я нажимаю значок + чтобы развернуть узлы или - чтобы свернуть узлы, дерево ведет себя очень странно, я имею в виду следующее:

weird_tree_behavior

события select и itemdblclick работают должным образом.

Также я прикрепил эти события: 

beforeitemexpand: function(item, eOpts) {
                    console.log('AAAA');
                    return false;
                },
                beforeitemcollapse: function(item, eOpts) {
                    console.log('BBBB');
                    return false;
                },
                beforeexpand: function(panel, animate, eOPts) {
                    console.log('CCCC');
                    return false;
                },
                beforecollapse: function(panel, animate, eOPts) {
                    console.log('DDDD');
                    return false;
                }

ни один из них не работает.

Вот мой код вида панели дерева: 

Ext.define('mycomponent.mytreepanelview', {
    extend: 'Ext.window.Window',
    itemId: 'mytreewindow',
    id: 'mytreewindow',
    xtype: 'mytreewindow',
    modal: true,
    bodyPadding: 10,
    height: 450,
    width: 375,
    closeAction: 'destroy',
    resizable: false,
    items: [
        {
            xtype: 'label',
            text: '?????'
        },
        {
            id: 'mytree',
            xtype: 'treepanel',
            border: true,
            width: 345,
            height: 325,
            title: '',
            rootVisible: false,
            header: false,
            displayField: 'text',
            store: Ext.create('mycomponent.store', {}),
            viewConfig: {
                preserveScrollOnRefresh: true,
                toggleOnDblClick: false
            }
        },
        {
            xtype: 'label',
            text: '??????'
        }
    ],
    buttons: [
        {
            itemId: 'okButton',
            id: 'okButton',
            text: 'Ok'
        },
        {
            itemId: 'cancelButton',
            id: 'cancelButton',
            text: 'Cancel'
        }
    ],

    initComponent: function () {
        this.callParent(arguments);
        dtzerp.getController('mycomponent.mycontroller');
    },

    constructor: function (config) {
        this.callParent(arguments);
        this.initConfig(config);
        return this;
   }
});

Кроме того, вот мой магазин: 

Ext.define('mycomponent.mystore', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.mystore',
    storeId: 'mystore',
    model: Ext.create('mycomponent.mymodel'),
    restful: true,
    autoLoad: false,
    root: {
        text: 'Loading...',
        id: 'NULL',
        expanded: true,
        loaded: true
    },
    proxy: {
        type: 'ajax',
        headers: {
           'Accept': '*/*',
           'Cache-Control': 'no-cache',
           'Content-Type': 'application/json',
           'Authorization': localStorage.token
        },
        extraParams: {
           sort: 'name',
           'filter[active]': true,
           'filter[idparent][null]': 0
        },
        reader: {
            type: 'json',
            rootProperty: 'data',
            successProperty: 'success'
        },
        api: {
           read: 'http://myurl',
           create: 'http://myurl',
           update: 'http://myurl',
           destroy: 'http://myurl'
        }
    },
    constructor: function (config) {
        config = Ext.apply({
            rootProperty: Ext.clone(this.rootData)
        }, config);

        this.callParent([config]);
    }
});

Более того, данные, поступившие из остальных API, всегда являются массивом с данными в выбранном узле, то есть только дочерними элементами выбранного узла, если он есть.

При первом вызове остальные API вернут что-то вроде этого: 

[
  {id: Ƈ', name: 'One', text: 'Item one', leaf: false, idparent: null}, 
  {id: ƈ', name: 'Two', text: 'Item two', leaf: false, idparent: null}, 
  {id: Ɖ', name: 'Three', text: 'Item three', leaf: true, idparent: null}
]

тогда, если я выберу первый пункт, остальные API вернут что-то вроде этого: 

[
   {id: Ɗ', name: 'Child 1-1', text: 'Child 1 of 1', leaf: false: idparent: Ƈ'},
   {id: Ƌ', name: 'Child 2-1', text: 'Child 2 of 1', leaf: true: idparent: Ƈ'}
]

и так далее...

Есть ли какое-либо свойство, которое я пропускаю, или какая-либо конфигурация, которую мне нужно добавить, чтобы избежать этого странного поведения?

Всего 1 ответ

Вам необходимо переопределить метод onBeforeExpand в вашем Ext.tree.View в Ext.tree.Panel .

Вы можете сделать это как: 

viewConfig: {
    onBeforeExpand: function (n) {
        if (n.childNodes.length === 0) {
            //HERE YOU MUST DO REQUEST AND IN CALLBACK:
            n.appendChild(twoItemNodes);
            n.expand();
            return false;
        }
    }
}

Посмотрите пример на скрипке: https://fiddle.sencha.com/#view/editor&fiddle/2sbc

Есть идеи?

10000