ExtJS 4.0 MVC应用程序中的TreeStore出现问题 [英] Trouble with TreeStore in ExtJS 4.0 MVC application
问题描述
新版本的ExtJS可能会使您的chrome不稳定(或者是我的代码?)！让我解释一下我的情况.
The new release of ExtJS can make your chrome unstable (Or is it my code?)! Let me explain my situation.
我正在研究ExtJS 4.0的新MVC体系结构.我有一个树形面板，显示我的应用程序菜单或导航.根据体系结构，我尝试将树面板拆分为控制器，视图和单独的存储.
I am working on the new MVC architecture of ExtJS 4.0. I have a tree panel displaying my applications menu or navigation. As per the architecture, I tried to split my tree panel into controller, view and a separate store.
这是我的观点:
Ext.define('CRM.view.menu.View', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
initComponent: function() {
console.log('initComponent of View...');
Ext.apply(this, {
title: 'Simple Tree',
width: 200,
store: 'MainMenu',
rootVisible: false
});
this.callParent(arguments);
}
});
我的树的商店:
Ext.define('CRM.store.MainMenu', {
extend: 'Ext.data.TreeStore',
constructor: function() {
console.log('Constructor of MainMenu TreeStore');
config = Ext.apply(this,{
proxy: {
type: 'ajax',
url: 'data/menu.json'
},root: {
text: 'Menu',
id: 'src',
expanded: true
}
});
this.callParent(arguments);
}
});
在我的控制器中，我也提供了我的商店信息.这是我的控制器配置的一部分:
And in my controller I have provided my store info as well. Here is part of my controller config:
Ext.define('CRM.controller.MainMenu',{
extend: 'Ext.app.Controller',
stores: ['MainMenu'],
refs: [
{ref:'menu',selector: 'menutree'},
{ref:'cp',selector: 'centerpane'}
],
.
.
.
在初始执行时，出现以下错误:
On initial execution, I get the following error:
对象MainMenu没有方法 'getRootNode'
Object MainMenu has no method 'getRootNode'
但是现在，我收到了更多奇怪的错误: 请注意，chrome在树存储的构造函数中停止执行.
But now, I get more weird error: Notice that chrome stops execution in the constructor of the tree store.
同时，在firefox中: Firefox的执行效果更好，但是没有呈现任何应用程序！
At the same time, in firefox: Firefox executes better, but there is no application rendered!
经过一番周折后..我确实找到了一种使我的应用程序运行的方法..那是避免使用我的商店，而直接提供商店信息，如下所示:
After some trail and error.. I did find a way to get my application running.. and that is to avoid using my store and directly provide the store information as shown below:
Ext.define('CRM.view.menu.View', {
alias: 'widget.menutree',
extend: 'Ext.tree.Panel',
initComponent: function() {
console.log('initComponent of View...');
Ext.apply(this, {
title: 'Simple Tree',
width: 200,
store: {
proxy: {
type: 'ajax',
url: 'data/menu.json'
},root: {
text: 'Menu',
id: 'src',
expanded: true
}
},
rootVisible: false
});
this.callParent(arguments);
}
});
现在，应用程序执行完全没有问题！
Now the application executes with no issues at all!
有人尝试使用MVC架构创建树面板吗?我不知道如何解决这个问题！
Did anybody try creating tree panel using MVC architecture? I have no clue into how to fix this!
推荐答案
看起来这是一个已知问题！！！引用 ExtJS论坛:
Looks like this is a known problem!!! Quoting from the ExtJS forums:
"Ext.tree.Panel"的父类 在商店中寻找商店 "initComponent"方法中的管理器， 但是"Ext.tree.Panel"尝试使用它 以前.
The parent class of "Ext.tree.Panel" looks for the store in the store manager in the "initComponent" method, but "Ext.tree.Panel" tries to use it before.
因此，一种方法是将您的商店编码到树中，另一种方法是在initComponent方法中重新分配商店.这是代码:
So, One way would be to code your store into your tree another way is to reassign the store in initComponent method. Here is the code:
initComponent: function(){
this.store = Ext.data.StoreManager.lookup(this.store);
this.callParent(arguments);
}
这篇关于ExtJS 4.0 MVC应用程序中的TreeStore出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
