Results 1 to 7 of 7

Thread: Treepanel doesn't load children and.... jumps right?

  1. #1
    Sencha User
    Join Date
    Aug 2016
    Posts
    14
    Answers
    1

    Default Treepanel doesn't load children and.... jumps right?

    Hi guys!!

    I'm trying to make a treepanel with all (it must have all) the elments and their children, but although I have the all the elements at my JSON it doesn't load properly and, everytime I click at the drop arrow it... 'jumps' to the right.

    I've created a fiddle for it
    https://fiddle.sencha.com/#view/editor&fiddle/1mcs



    JSON:
    Code:
    {
        "menus" : [{
                "checked" : true,
                "children" : [{
                        "checked" : true,
                        "iconCls" : "x-fa fa-exclamation-circle",
                        "id" : 5,
                        "leaf" : true,
                        "text" : "Cesta"
                    }, {
                        "checked" : true,
                        "iconCls" : "x-fa fa-globe ",
                        "id" : 6,
                        "leaf" : true,
                        "text" : "Todos"
                    }
                ],
                "expanded" : false,
                "iconCls" : "x-fa fa-desktop",
                "id" : 1,
                "leaf" : false,
                "text" : "Trabalhos"
            }, {
                "checked" : true,
                "children" : [{
                        "checked" : true,
                        "iconCls" : "x-fa fa-exclamation-circle",
                        "id" : 7,
                        "leaf" : true,
                        "text" : "Cesta"
                    }, {
                        "checked" : true,
                        "iconCls" : "x-fa fa-globe ",
                        "id" : 8,
                        "leaf" : true,
                        "text" : "Todos"
                    }
                ],
                "iconCls" : "x-fa fa-paper-plane",
                "id" : 2,
                "leaf" : false,
                "text" : "Avaliação"
            }, {
                "checked" : true,
                "iconCls" : "x-fa fa-user",
                "id" : 4,
                "leaf" : true,
                "text" : "Usuário"
            }, {
                "checked" : true,
                "iconCls" : "x-fa fa-users",
                "id" : 3,
                "leaf" : true,
                "text" : "Grupos"
            }
        ]
    }

    Store:
    Code:
    Ext.define('StoreMenus', {
        extend: 'Ext.data.TreeStore',
        
        alias: 'store.menus',
        lazyFill: false,
        
            
        proxy: {
            type: 'ajax',
            url : 'listmenus.action',
            reader: {
                type: 'json',
                rootProperty: 'menus'
            }
        }    
    });

    Panel
    Code:
    Ext.define('MenuTreeList', {
        extend: 'Ext.tree.Panel',
        xtype: 'menutreelist',
        
         requires: [
            'StoreMenus'
        ],
        
         initComponent: function() {
            var store = Ext.create('StoreMenus');
            store.getProxy().setExtraParam('idGrupo','1');
            
            Ext.apply(this, {
                store: store
            });
            this.callParent();
            this.getStore().load();
        },
        
        defaults: {
            cls: 'treepanelmenu'
        },
        
        checkPropagation: 'down',
        rootVisible: false,
        useArrows: true,
        frame: true,
        title: 'Permissão de Menus',
        width: 280,
        height: 300,
        bufferedRenderer: false,
        animate: true
    });

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Posts
    432
    Answers
    11

    Default

    Have you looked at the Tree examples in the docs?

    The code is available to look at on the page and your local copy.

    http://examples.sencha.com/extjs/6.2...ng-treegrid.js


    Kevin Jackson
    Sencha Support Team

  3. #3
    Sencha User
    Join Date
    Aug 2016
    Posts
    14
    Answers
    1

    Default

    Yes I did.
    What is happening... when I have a JSON with root different than 'children' (even if I define rootProperty of reader), it doesn't set as a full loaded tree and keeps trying to remote load it.
    Don't know if it is a bug or if I have missed something in documentation.

  4. #4
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    Actually, you can specify a function for the "rootProperty", like so:
    Code:
    rootProperty: function(data){
      return data.menus || data.children;
    }

  5. #5
    Sencha Premium User
    Join Date
    May 2012
    Posts
    9

    Default

    Good day guys
    I have been struggling for almost 2 days now trying to display static data in a TreePanel. Here is my code:
    Model
    Code:
    Ext.define('BasisGui1.Crm.model.rolesModel', {
        extend: 'Ext.data.TreeModel',
        alias: 'model.rolesmodel',
        requires: [
        ],
        idProperty: 'id',
        fields: [
            {
                type: 'string',
                name: 'text'
            }, {
                type: 'string',
                name: 'id'
            },{
                type: 'string',
                name: 'user'
            },{
                type: 'string',
                name: 'desc'
            },{
                type: 'boolean',
                name: 'leaf'
            }
        ]
    });
    Store
    Code:
    Ext.define('BasisGui1.Crm.store.rolesStore', {
        extend: 'Ext.data.TreeStore',
        requires: [
            'BasisGui1.Crm.model.rolesModel'
        ],
        storeId: 'rolesStoreId',
        alias: 'store.rolesStore',
        model: 'BasisGui1.Crm.model.rolesModel',
        autoLoad: true,
        reader : {
            root : 'children'
        },
        root: {
            text: 'Rechte & Rollen',
            desc: 'bitte wählen',
            id: 'root',
            children: [
                {
                    text: 'Rollegruppe 1',
                    id: 'roleGr01',
                    children: [{
                        text: '1.1',
                        user: 'user1',
                        desc: 'desc1',
                        leaf: true
                    }, {
                        text: '1.2',
                        user: 'user1',
                        desc: 'desc1',
                        leaf: true
                    }]
                }, {
                    text: 'Rollegruppe 2',
                    id: 'roleGr02',
                    children: [{
                        text: '2.1',
                        user: 'user1',
                        desc: 'desc1',
                        leaf: true
                    }, {
                        text: '2.2',
                        user: 'user1',
                        desc: 'desc1',
                        leaf: true
                    }]
                }
            ]
        }
    });
    Panel
    Code:
    xtype: 'panel',
                        defaults: {
                            width: 850
                        },
                        layout: 'form',
                        bodyPadding: 5,
                        items: [
                            Ext.create('Ext.tree.Panel', {
                                title: 'Rechte & Rollen',
                                height: 300,
                                reserveScrollbar: true,
                                collapsible: true,
                                loadMask: true,
                                useArrows: true,
                                rootVisible: true,
                                store: {
                                    type: 'rolesStore'
                                },
                                animate: true,
                                columns: [{
                                    xtype: 'treecolumn',
                                    text: 'Name',
                                    flex: 2.3,
                                    sortable: true,
                                    dataIndex: 'text'
                                }, {
                                    text: 'User',
                                    flex: 1.1,
                                    dataIndex: 'user',
                                    sortable: true
                                }, {
                                    text: 'Beschreibung',
                                    flex: 2.1,
                                    dataIndex: 'desc'
                                }]
                            })
                        ]
    Many thanks for your prompt response!
    Kind regards
    Jaco Louw

  6. #6
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    You don't need the `autoLoad` config for you tree store, because you already have the data. The `reader` config is also not needed. Anyway, it is a proxy, and not a tree store config. Without these lines, your code works fine.

  7. #7
    Sencha Premium User
    Join Date
    May 2012
    Posts
    9

    Thumbs up

    Many thanks charmer! Was driving my nuts

    Much appreciated!

Similar Threads

  1. [CLOSED] [4.2.1 GA] TreePanel doesn't show children after reload
    By Daniil in forum Ext:Bugs
    Replies: 1
    Last Post: 4 Jun 2013, 8:46 AM
  2. Avoid children load when children allready loaded in TreePanel
    By zopinto in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 12 Aug 2010, 7:52 AM
  3. TreePanel problem: node with no children must be a leaf after AJAX load
    By ReBorn in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 21 Jun 2010, 3:36 AM
  4. Replies: 1
    Last Post: 10 May 2010, 6:37 PM
  5. TreePanel doesn't load data dynamically
    By sheddy in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 12 Aug 2008, 3:35 AM

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
  •