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
ExtJS 4 TreePanel autoload
提问by Stir Zoltán
I have an Ext.tree.Panel
which 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 root
is invisible then AJAX
tree 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 AJAX
request 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 - Ajax
request 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 root
inline 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 .load
the 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 children
and autoLoad : false
:
尝试使用children
和autoLoad : false
:
root: {
children : []
}