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:
Object MainMenu 没有方法'获取根节点'
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屋！
