extjs treepanel weird behavior after click on + to expand

Question

I'm building a treepanel and when I click the + icon to expand nodes or - to collapse nodes the tree does a very weird behavior, I mean this:

the select and itemdblclick events are working as espected.

Also, I've attached these events:

beforeitemexpand: function(item, eOpts) {
                   ...
                },
                beforeitemcollapse: function(item, eOpts) {
                    ...
                },
                beforeexpand: function(panel, animate, eOPts) {
                    ...
                },
                beforecollapse: function(panel, animate, eOPts) {
                    ...
                }

none of them works.

Here is my treepanel view code:

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;
   }
});

Also, here is my store:

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]);
    }
});

Moreover, the data that came from the rest api is always an array with the data in the selected node, that is to say, only the children of the selected node, if it has any.

On the first call, the rest api will return something like this:

[
  {id: '1', name: 'One', text: 'Item one', leaf: false, idparent: null}, 
  {id: '2', name: 'Two', text: 'Item two', leaf: false, idparent: null}, 
  {id: '3', name: 'Three', text: 'Item three', leaf: true, idparent: null}
]

then, if I select first item the rest api will return something like this:

[
   {id: '4', name: 'Child 1-1', text: 'Child 1 of 1', leaf: false: idparent: '1'},
   {id: '5', name: 'Child 2-1', text: 'Child 2 of 1', leaf: true: idparent: '1'}
]

and so on...

UPDATE I'm commanding the store (Ext.data.TreeStore) to load on the show event of the window which contains the treepanel. This is in the controller:

  init: function () {
            this.control({
               '#mytreewindow': {
                   show: function (item, eOPts) {
                     var store = Ext.getStore('mytreestore');
                     var children = [];
                     var that = this;

                     store.load({
                         callback: function (records) {
                             debugger;
                             console.log(records);

                             var children = [
                               {text: 'testing',
                                leaf: false,
                                idparent: null,
                                idelement: 1,
                                children: [{idparent: 1,
                                            text: 'testing child',
                                            idelement: 2,
                                            leaf: true,
                                            children: []
                               }
                             ];
                             store.loadData(children, false);
                         }

the store enters into the callback, but when debugger stops the execution the tree is filled with the data from the rest-api, right before the callback is executed. So, after store.loadData(... the tree updates with the new info, but, when click the node + in the node testing it goes back to the same as in the image.

Are there any property I'm missing, or any configuration that I need to add in order to avoid this weird behavior?

Can you attach the example on fiddle? What data is in the store? — norbeq
@norbeq the store data is from a rest api, and the tree is beign loaded on demand — assembler
I mean store data instead of store definition. You need to attach example (even better on the fiddle) to explain where is the problem and can be recreated. — norbeq
I just updated my answer. You need to do request and in callback just add childs and expand the node again. Look on refreshed example — norbeq

norbeq norbeq · Accepted Answer · 2019-05-17T12:04:00

You need to override onBeforeExpand method in your Ext.tree.View in Ext.tree.Panel.

You can do it like :

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

Look example on fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2sbc

extjs treepanel weird behavior after click on + to expand

1 Answers