Results 1 to 3 of 3

Thread: TreePanel removing nodes after collapse and expanded node

  1. #1
    Sencha User
    Join Date
    Apr 2019
    Posts
    7

    Default TreePanel removing nodes after collapse and expanded node

    I'm trying Extjs and I'm very new to Extjs, I have a window with nothing but a text, a treepanel and a couple of buttons.

    I have a restapi which returns a tree as array, like this:
    Code:
    [{idelement: '1', name: 'name1', description: 'desc1', active: true, idparent: null, isleaf: false}, {idelement: '2', name: 'name2', description: 'desc2', active: true, idparent: null, isleaf: true}, {idelement: '3', name: 'name3', description: 'desc3', active: true, idparent: '1', isleaf: true}]
    . I have to load the store after the window is shown and then I need to reformat the array in order to be draw by the treepanel. It works like a charm, even if I expand nodes, but when collapse nodes the treepanel removes all nodes below the collapsed node.

    here is my view:
    Code:
    Ext.define('mycomponent.myview', {
        extend: 'Ext.window.Window',
        itemId: 'mytreeview',
        id: 'mytreeview',
        xtype: 'mytreeview',
        modal: true,
        bodyPadding: 10,
        height: 450,
        width: 375,
        closeAction: 'destroy',
        resizable: false
        items: [
            {
                xtype: 'label',
                text: 'Please select:'
            },
            {
                id: 'mytree',
                xtype: 'treepanel',
                border: true,
                width: 345,
                height: 325,
                title: '',
                rootVisible: false,
                header: false,
                displayField: 'text',
                renderTo: Ext.getBody(),
                store: Ext.create('mycomponent.mystore'),
                viewConfig: {
                    preserveScrollOnRefresh: true,
                    toggleOnDblClick: false
                }
            }
        ],
        buttons: [
            {
                itemId: 'okButton',
                id: 'okButton',
                text: 'Ok'
            },
            {
                itemId: 'cancelButton',
                id: 'cancelButton',
                text: 'Cancela'
            }
        ],
    
        initComponent: function () {
            this.callParent(arguments);
            dtzerp.getController('mycomponent.mycontroller');
        }
    });
    this is my store:
    Code:
    Ext.define('mycomponent.mystore', {
        extend: 'Ext.data.TreeStore',
        alias: 'store.mystore',
    
        storeId: 'mystore',
    
        fields: [
            {
                 name: 'idelement',
                 mapping: 'pk'
            },
            {
                 name: 'name',
                 type: 'string',
                 mapping: 'name'
            },
            {
                name: 'description',
                type: 'string',
                mapping: 'description'
            },
            {
                 name: 'active',
                 type: 'bool',
                 mapping: 'active'
            },
            {
                name: 'idparent',
                mapping: 'idparent'
            },
            {
                name: 'text',
                type: 'string'
            },
            {
                name: 'isleaf',
                type: 'boolean'
            }
        ],
        restful: true,
        autoLoad: false,
    
        type: 'webapi',
    
        root: {
            text: 'Loading...',
            id: 'root',
            expanded: true,
            loaded: true
        },
        proxy: {
            type: 'ajax',
            headers: {
               'Accept': '*/*',
               'Cache-Control': 'no-cache',
               'Content-Type': 'application/json',
               'Authorization': localStorage.token
            },
            extraParams: {
               sort: 'idelement',
               'filter[active]': true,
               'filter[idpadent]': -1
            },
    
            reader: {
                type: 'json',
                rootProperty: 'children',
                successProperty: 'success'
            },
    
            api: {
               read: 'http://myurl',
               create: 'http://myurl',
               update: 'http://myurl',
               destroy: 'http://myurl'
            }
        }
    });
    this is my controller:
    Code:
    Ext.define('mycomponent.mycontroller', {
        extend: 'Ext.app.Controller',
    
        init: function () {
            this.control({
                '#mytreeview': {
                    'show': function (item, eOPts) {
                        var store = Ext.getStore('mystore');
                        var children = [];
                        var that = this;
    
                        store.load({
                            callback: function (records) {
                                for (var i = 0, l = records.length; i < l; i++) {
                                    var x = records[i].data;
                                    var child = {
                                        text: x.name + ' ' + x.description,
                                        leaf: x.leaf,
                                        id: x.idelement,
                                        idparent: x.idparent
                                    };
    
                                    if (!child.idparent) {
                                        children.push(child);
                                    } else {
                                        that.addIntoParentNode(children, child);
                                    }
                                }
    
                                store.loadData(children, false);
                            }
                        });
                    }
                },
    
                addIntoParentNode: function(data, child) {
                    for (var i = 0, l = data.length; i < l; i++) {
                        var x = data[i];
                        if (x.idelement === child.idparent) {
                            if (!x.children) {
                                x.children = [];
                            }
                            x.children.push(child);
                            return;
                        }
                        if (x.children && x.children.length) {
                            this.addIntoParentNode(x.children, child);
                        }
                    }
                }
    
          ...
         }
    });
    The thing is shown in the next two images:

    first.png
    second.png

    Am I missing any configuration? What am I doing wrong? Please help.

  2. #2
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    569
    Answers
    7

    Default

    Hello,

    Thank you for contacting Sencha Support!

    I request you to provide a fiddle demonstrating the issue, It seems issue is because of the data which you have created for tree store is not in correct format.
    Regards,
    Kumar
    Sencha Support.

  3. #3

    Join Date
    Dec 2013
    Location
    Italy
    Posts
    88
    Answers
    9

    Default

    Hi,
    you are using a store with a remote proxy so, by default, the TreePanel will request nodes to the serve on every expand and collapse. With the dynamic loading the server must be able to give the treepanel the requested nodes (ex. the children of node '3').

    If your API will return all the tree on the first call, you can use a store without poxy to populate just one time at the show. Try updating your example like this:

    Store:
    Code:
    Ext.define('mycomponent.mystore', {
        extend: 'Ext.data.TreeStore',
        alias: 'store.mystore',
    
    
        storeId: 'mystore',
    
    
        restful: true,
        autoLoad: false,
    
    
        type: 'webapi',
    
    
        root: {
            text: 'Loading...',
            id: 'root',
            expanded: true,
            loaded: true
        }
    });
    Controller:
    Code:
    Ext.define('mycomponent.mycontroller', {
        extend: 'Ext.app.Controller',
    
    
        init: function () {
            this.control({
                '#mytreeview': {
                    'show': function (item, eOPts) {
    
                           var store = Ext.getStore('mystore');
                        
    
    item.down('treepanel').setLoading(true);
    Ext.Ajax.request({
    method: 'GET',
    url: 'http://myurl',
    headers: {
    'Accept': '*/*',
    'Cache-Control': 'no-cache',
    'Content-Type': 'application/json',
    'Authorization': localStorage.token
    },
    params: {
    sort: 'idelement',
    'filter[active]': true,
    'filter[idpadent]': -1
    },
    success: function (response) {
    var responseData = Ext.decode(response.responseText, true) || [];
    responseData.forEach(function (nodeObj) {
    var node = {
    id: nodeObj.idelement,
    text: nodeObj.name + ' ' + nodeObj.description,
    leaf: nodeObj.isleaf
    };
    if (!nodeObj.idparent) {
    store.getRoot().appendChild(node);
    } else {
    var parent = store.getNodeById(nodeObj.idparent);
    parent && parent.appendChild(node);
    }
    });
    },
    callback: function () {
    item.down('treepanel').setLoading(false);
    }
    });
    } } ... } });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •