autoLoad: false TreeStore in with TreePanel rootVisible: false

fabio.policeno · 13 Mar 2012 1:10 PM

Hello, I understand the idea of autoLoad: false TreeStore the "no work" or work differently due to the expansion of the root. But if you do not want to display this root, there's no way I set it so that it is not expanded, since it is hidden. The main problem is I need to load the tree after it is rendered, but it strikes me the following error:

Code:

records[i] is undefined
...
ns[i].viewRecordId = records[i].internalId;

Moreover, it tries to create new nodes instead of removing the existing and doing a "reload" menu.To better illustrate the problem, I created the example below.

Code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="../resources/css/ext-all.css" type="text/css">
        <script type="text/javascript" src="../ext-all-dev.js"></script>
        <script type="text/javascript">

            Ext.define('Menu', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'id', type: 'int'},
                    'text',
                    'leaf'
                ],
                proxy : {
                    type  : 'ajax',
                    url      : 'menu.json',
                    reader: {type: 'json'},
                }
            });
        
            Ext.onReady(function() {
                var store = Ext.create('Ext.data.TreeStore', {
                    model    : 'Menu',
                    autoLoad: true
                });

                Ext.create('Ext.tree.Panel', {
                    renderTo   : Ext.getBody(),
                    height       : 100,
                    store       : store,
                    rootVisible: false
                });
                
                store.load();
            });
        </script>
    </head>
    <body>
    </body>
</html>

menu.json

Code:

[{
    id    : 1,
    text: 'Menu 1',
    leaf: true
},{
    id    : 2,
    text: 'Menu 2',
    leaf: true
}]

Ext JS 4.0.7

Thank you!

mitchellsimoens · 14 Mar 2012 9:46 AM

If you wanted to stop the loading you can return false in a beforeload event listener. Then to load you can do

Code:

store.load({
    node : rootnode
});

fabio.policeno · 14 Mar 2012 10:06 AM

As specifically stop load? return false just before the load is not going to stop .. I do not understand your code .. I put in the rootnode, if I do not want the menu has a root?

mitchellsimoens · 14 Mar 2012 10:11 AM

Code:

store.on('beforeload', function() { return false; });

then...

Code:

store.load({
    node : store.getRootNode()
});

fabio.policeno · 14 Mar 2012 10:53 AM

Code:

Ext.define('Compstoque.view.Menu' ,{
    extend       : 'Ext.tree.Panel',
    alias      : 'widget.mainmenu',
    region     : 'west',
    title       : 'Menu',
    width       : 200,
    minWidth   : 150,
    maxWidth   : 400,
    split       : true,
    collapsible: true,
    store       : 'Menu',
    rootVisible: false
});

Code:

Ext.define('Compstoque.store.Menu', {
    extend: 'Ext.data.TreeStore',
    model : 'Compstoque.model.Modulo'
});

Code:

...
'mainmenu'          : {
                render     : me.loadMenu,
                ...           
 },
...
loadMenu: function(tree) {
        var store = tree.getStore();
        
        store.on('beforeload', function() {return false;});
        store.load({
            node : store.getRootNode()
        });
    },

not really loads the menu, but he keeps doing the requests, including a need to "reload" on the menu with other data, but is not occurring. Even several requests being made unnecessarily. In short, I want to load the menu in store only at render, this method LoadMenu, but I'm not getting.

store.jpg

ext treestore auload失效问题