Javascript ExtJs树加载序列
你好 我正在使用Ext.tree.Panel编写一个树控件,该控件从外部.json文件加载其配置,而数据从服务器加载为.json 所以,我有这样的观点:Javascript ExtJs树加载序列,javascript,extjs,tree,Javascript,Extjs,Tree,你好 我正在使用Ext.tree.Panel编写一个树控件,该控件从外部.json文件加载其配置,而数据从服务器加载为.json 所以,我有这样的观点: Ext.define('App.tree.TreeView', { extend: 'Ext.tree.Panel', ... initFilters: function(cfg) { /*several this.store.addFilter() based on cfg*/ },
Ext.define('App.tree.TreeView', {
extend: 'Ext.tree.Panel',
...
initFilters: function(cfg) {
/*several this.store.addFilter() based on cfg*/
},
initComponent: function () {
var me = this;
me.cfg = getSomeCfgFromSomewhere();
me.initFilters(me.cfg);
}
});
商店:
Ext.define('Site.widgets.tree.TreeStore', {
extend: 'Ext.data.TreeStore',
...
proxy: {
type: App.cfg.proxy,
reader: { type: 'json', rootProperty: 'data.children' },
format: App.cfg.proxy.urlEnd,
url: App.cfg.treeRoot,
noCache: false
}
lazyFill: true,
rootVisible: true,
root: {
full_path: '/', /*set as idProperty in model*/
'display-name': 'root',
expanded: true
},
});
问题是:我的根在存储中显式设置,它加载其内容是因为扩展:true。但是树中只显示这些内容,而不显示根本身。删除过滤后,tre加载正常
可能的原因:在ext-all-debug.js中调试Sencha代码时,在存储开始加载数据之前调用了view的initComponent,因此它在加载数据之前添加了过滤器,此时根目录仍然为空,然后调用
onNodeFilter: function(root, childNodes) {
var me = this,
data = me.getData(),
toAdd = [];
if (me.getRootVisible()) {
if (childNodes.length) {
toAdd.push(root);
} else {
root.set('visible', false, me._silentOptions);
}
}
...
}
,即,根被设置为不可见,因为它仍然是空的,并且只有在那时才加载根的子项
问题是:我的过滤器初始化中是否存在初始设计错误,我如何修复它?考虑到问题是在存储开始加载数据之前调用了视图的initComponent,我会尝试: 在存储加载事件中调用initFilters,如下所示:
Ext.define('Site.widgets.tree.TreeStore', {
extend: 'Ext.data.TreeStore',
...
proxy: {
type: App.cfg.proxy,
reader: { type: 'json', rootProperty: 'data.children' },
format: App.cfg.proxy.urlEnd,
url: App.cfg.treeRoot,
noCache: false
}
lazyFill: true,
rootVisible: true,
root: {
full_path: '/', /*set as idProperty in model*/
'display-name': 'root',
expanded: true
},
listeners : {
load : function() {
//Call initFilters.
//initFilters should call addFilter just once,
//with array of filters as first parameter,
//to avoid filtering the hole tree more than once!
}
}
});
这种方法有一个问题,因为您必须处理initFilters cfg参数范围。好的,答案的一部分就在问题的内部:我可以通过在存储中重载
onNodeFilter()
方法来解决这个问题,因为我知道我希望始终显示根。如果有人能给我更好的建议,请便 后端返回一个由节点的full_path成员中包含的路径定义的节点,因此动态加载树。根必须描述我要加载的子树的“上”节点,然后我希望能够从外部对其进行更改。我的代理实际上是这样的:proxy:{type:App.cfg.proxy,reader:{type:'json',rootProperty:'data.children',格式:App.cfg.proxy.urlEnd,url:Site.cfg.url.treeRoot,noCache:false}
感谢您的帮助。第一件事我自己尝试过,但没有改变行为。第二种方法可能有效,但在任何加载事件中初始化过滤器似乎都是一个相当昂贵的修复,因为它们中的每一个都调用整个树的过滤,通常大约有6个过滤器。欢迎使用!addFilter方法接受过滤器数组作为第一个参数,因此您可以只调用一次!哦,好的,修复了我代码中的过滤器初始化,谢谢。试着用你发布的第二种方式来做这件事,结果成功了!尽管如此,每次加载都会这样做,而我更愿意在初始化时只做一次,但我还是应该支持您的解决方案。很好,至少您找到了解决方案!=)