下面,您将看到我在Sencha ExtJS MVC应用程序中创建的MVC视图出现JavaScript异常。我有另一个MVC视图,它扩展了"Ext.tree.Panel",它读取一个简单的JSON对象,而不是通过Ext.Direct代理和.NET服务器端堆栈提取数据,但唯一不同的是代理实现,当然还有我们的MVC控制器逻辑。在静态(JSON)实现中,我们的代理是在模型中定义的。在动态(Ext.Direct)实现中,我们的代理是在存储中定义的。TreeStructures.js(store)JavaScript文件被无限次地请求,直到浏览器崩溃。请参阅下面的异常。
我非常怀疑这是一个Ext.Direct问题,因为我有其他商店可以很好地使用这种架构。我看到[Ext.Loader]异常,但我不知道为什么每次新的TreeStructures.js请求都会重复这个异常。或者在哪里实施这一要求。我的理解是,app.js定义了控制器。然后,控制器定义并存储模型。Viewport定义并实例化其他MVC视图。我的"其他视图"是树视图。视图实现了存储。
此外,Sencha Cmd"Sencha app build"命令不起作用。通常情况下,我的应用程序编译时没有任何问题,所以存储或MVC配置中肯定缺少此动态树所必需的东西。
JavaScript控制台中出现异常:
[Ext.Loader] Synchronously loading 'MyApp.store.TreeStructures'; consider adding Ext.require('MyApp.store.TreeStructures') above Ext.onReady
浏览器崩溃,出现以下JavaScript异常:
注意:TreeStructures.js(存储)JavaScript文件被无限次请求,直到浏览器崩溃为止:
Uncaught RangeError: Maximum call stack size exceeded
Sencha Cmd错误(调用"Sencha app build"命令后):
[ERR] failed to find meta class definition for name MyApp.store.TreeStructures
[ERR] def was null
[ERR] C2008: Requirement had no matching files <MyApp.store.TreeStructures> -- unknown-file:-1
静态树实现(读取JSON对象以获取数据):
Ext.define('MyApp.store.Categories', {
extend : 'Ext.data.TreeStore',
model : 'MyApp.model.Category',
autoLoad : true,
root : {
text : 'All',
alias : '',
expanded : true
}
});
Ext.define('MyApp.model.Category', {
extend: 'Ext.data.Model',
fields: [
{ name: 'alias', type: 'auto' },
{ name: 'text', type: 'auto' }
],
proxy: {
type: 'ajax',
url: 'data/categories.json'
}
});
Ext.define('MyApp.controller.ConceptTreeReadonly', {
extend : 'Ext.app.Controller',
stores: ['Categories'],
models: ['Category'],
refs : [{
ref: 'categories',
selector: 'view-west'
}],
});
动态树实现(使用服务器端堆栈获取数据):
Ext.create('MyApp.store.TreeStructures', {
extend: 'Ext.data.TreeStore',
model : 'MyApp.model.TreeStructure',
proxy: {
type: 'direct',
directFn: Concept_Tree_Structure.read,
reader: {
root: 'data'
}
},
root: {
text: 'Concept Tree',
id: 'root',
expanded: false
//children: []
},
autoLoad: false
});
Ext.define('MyApp.model.TreeStructure', {
extend: 'Ext.data.Model',
xtype: 'model-tree-structure',
fields: [
{ name: 'text' }, // string
{ name: 'id' }, // Int32 type: 'int'
{ name: 'expanded' }, // boolean
{ name: 'leaf' }, // boolean
{ name: 'children' } // List<TreeStructure>
]
});
Ext.define('MyApp.controller.ConceptTreeController', {
extend : 'Ext.app.Controller',
stores: ['TreeStructures', 'Concepts'],
models: ['TreeStructure', 'Concept'],
refs : [{
ref: 'concept-tree',
selector: 'view-concept-tree'
}],
init : function() {
this.getConceptsStore().load({
params: {
start: 0,
limit: 10,
foo: 'bar'
}
});
this.getTreeStructuresStore().load({
params: {
start: 0,
limit: 10,
foo: 'bar'
}
});
}
});
更改外部创建('MyApp.store.TreeStructures'…
至Ext.define('MyApp.store.TreeStructures'…