javascript ExtJS 4 TreePanel 自动加载

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6843864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 22:03:48  来源:igfitidea点击:

ExtJS 4 TreePanel autoload

javascriptextjs4

提问by Stir Zoltán

I have an Ext.tree.Panelwhich is has a TreeStore. This tree is in a tab. The problem is that when my application loads all of the trees used in the application load their data, even though the store is on autoLoad: false.

我有一个Ext.tree.Panel它有一个TreeStore. 这棵树在一个选项卡中。问题是,当我的应用程序加载应用程序中使用的所有树时,即使存储在autoLoad: false.

How could I prevent autoloading on the tree?

如何防止在树上自动加载?

Ext.define('...', {
    extend: 'Ext.container.Container',
    alias: 'widget.listcontainer',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'container',
        html: "...",
        border: 0
    }, {
        xtype: '...',
        flex: 1,
        bodyPadding: 5,
        margin: '9 0 0 0'
    }]
});

Ext.define('...', {
    extend: 'Ext.data.TreeStore',
    model: '...',
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json',
            root: 'data'
        },
        api: {
            read: 'some url'
        }
    }
});

Ext.define('...', {
    extend: 'Ext.tree.Panel',
    alias: 'widget....',
    id: '...',
    title: '...',

    height: 400,
    collapsible: true,
    useArrows: true,
    rootVisible: false,
    multiSelect: true,
    singleExpand: true,
    autoScroll: true,
    store: '...',

    columns: [...]
});

P.S. I've found out if I change rootVisible to true on the tree this problem doesn't happen, but then it shows to root node(which I don't want).

PS 我发现如果我在树上将 rootVisible 更改为 true 这个问题不会发生,但是它会显示到根节点(我不想要)。

采纳答案by Xupypr MV

If rootis invisible then AJAXtree will automatically load first level of hierarchy (as you already proved by yourself).

如果root是不可见的,则AJAX树将自动加载第一级层次结构(正如您自己已经证明的那样)。

I think the best way is to make root visible or create tree after some actions. I wrote code that prevent AJAXrequest that loads data:

我认为最好的方法是在某些操作后使根可见或创建树。我编写了阻止AJAX加载数据的请求的代码:

var preventTreeLoad = true;

store.on('beforeexpand', function(node) {
    if (node == this.getRootNode() && preventTreeLoad) {
        Ext.Ajax.abort(this.proxy.activeRequest);
        delete this.proxy.activeRequest;
    }
}, store);

var b = Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: 'btn',
});

b.on('click', function() {
    preventTreeLoad = false;
    this.load();
}, store);

But I'm not recommended to use this approach. For example, if javascript wasn't so fast - Ajaxrequest may be send (response will not be read but server will execute operation).

但我不建议使用这种方法。例如,如果 javascript 不是那么快 -Ajax可能会发送请求(不会读取响应但服务器将执行操作)。

回答by pablodcar

I hit the same problem, and to avoid an implicit request, I specified a rootinline in the TreeStore's configuration, like:

我遇到了同样的问题,为了避免隐式请求,我root在 TreeStore 的配置中指定了一个内联,例如:

Ext.create('Ext.data.TreeStore', {
    model: '...',
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json',
            root: 'data'
    },
    api: {
        read : 'some url'
    }
    folderSort: true,
    rootVisible: false,
    root: {expanded: true, text: "", "data": []} // <- Inline root
});

After an explicit .loadthe inline root is overwritten.

在显式之后.load,内联根被覆盖。

回答by cchow

You can put a dummy proxy in place when defining the tree, then set the real proxy when you want to begin using the tree/store. For example:

您可以在定义树时放置一个虚拟代理,然后在您想要开始使用树/商店时设置真正的代理。例如:

var store = Ext.define('Ext.data.TreeStore', {
   ...
   // dummy proxy to avoid autoLoad on tree store construction
   proxy: {
      type: 'ajax',
      url: ''
   },
   ...
);

Then, when you want to use it for the first time,

那么,当你想第一次使用它时,

store.setProxy({
   type: 'ajax',
   url: 'http://some/real/url',
   ...
});
store.load();

回答by harrydeluxe

You can solve it with a small override:

你可以用一个小的覆盖来解决它:

Ext.override(Ext.tree.View,  
{ 
    setRootNode: function(node)
    {
        var me = this;        
        me.store.setNode(node);
        me.node = node;
        if (!me.rootVisible && me.store.autoLoad)
        {
            node.expand();
        }
    }
}); 

afterlayout you need a load()

afterlayout 你需要一个 load()

回答by boaz levinson

Adding to what XenoN said (though many years later when I hit the same issue) If the expanded property is set to true in the store definition, it will auto load even if autoLoad is set to false. this is unique to a TreeStore.

添加到 XenoN 所说的(尽管很多年后当我遇到同样的问题时)如果在商店定义中将扩展属性设置为 true,即使 autoLoad 设置为 false,它也会自动加载。这是 TreeStore 独有的。

However, if we do want the store to load and expand we need to Set expanded = true sometimes in code after creation (when we want) this also fires the loading of the previously created store.

但是,如果我们确实希望商店加载和扩展,我们有时需要在创建后的代码中设置 Expanded = true (当我们需要时)这也会触发先前创建的商店的加载。

setting store.setRoot({expanded:true}); within the consumer of the store which is Ext.tree.Panel. This will load the store when you want it to load it.

设置 store.setRoot({expanded:true}); 在商店的消费者中,即 Ext.tree.Panel。这将在您希望加载商店时加载它。

seems like after that, store.load() is redundant since the expanded = true makes the store's proxy to load up and go to the server. weird, I know.

似乎在那之后, store.load() 是多余的,因为 expand = true 使商店的代理加载并转到服务器。很奇怪,我知道。

回答by XenoN

Simplest way is setting Store's root property

最简单的方法是设置 Store 的 root 属性

Ext.create('Ext.data.TreeStore', { 
    ....
    autoLoad:false,
    root: {        
      expanded: false
    }
});

回答by user1093696

Try with childrenand autoLoad : false:

尝试使用childrenautoLoad : false

root: {
    children : []
}