![](/img/trans.png)
[英]Extjs4 - What is the equivalent to ExtJs3's panel 'findByType' method?
[英]ExtJS: What's the point of requires?
我一直试图找出Ext JS 4中的要求,我似乎无法得出一个合理的答案。 假设我有以下代码:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'examples/ux');
Ext.application({
name: 'Test',
appFolder: 'app',
controllers: ['TheController'],
requires: ['Test.Utils', 'Test.Utils2'], // I don't think this does anything... couldn't find this option for Ext.application
launch: function() {
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'thegrid',
region: 'center',
title: 'blah!'
}]
});
}
});
应用程序/控制器/ TheController.js
Ext.define('Test.controller.TheController', {
extend: 'Ext.app.Controller',
models: ['TheModel'],
stores: ['TheStore'],
views: ['TheGrid'],
init: function() {
}
});
应用程序/视图/ TheGrid.js
Ext.define('Test.view.TheGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.thegrid',
requires: ['Test.store.TheStore'],
store: 'TheStore',
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Phone', dataIndex: 'phone'},
{header: 'Hello', dataIndex: 'hello'}
]
});
应用/存储/ TheStore.js
Ext.define('Test.store.TheStore', {
extend: 'Ext.data.Store',
requires: ['Test.model.TheModel', 'Test.Utils'],
model: 'Test.model.TheModel',
data: [
{name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
{name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
{name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
]
});
应用程序/模型/ TheModel.js
Ext.define('Test.model.TheModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'hello', type: 'string'}
]
});
应用程序/ Utils.js
Ext.define('Test.Utils', {
singleton: true,
requires: ['Test.Utils2'],
getText: function() {
return Test.Utils2.hello + 'world';
}
});
应用程序/ Utils2.js
Ext.define('Test.Utils2', {
singleton: true,
hello: 'hello'
});
我意识到这是一个很长的例子,但我需要确保我完全描绘了我在做什么。 Utils依赖于Utils2,因为它需要调用Utils2的hello变量。 其余的代码是设置一个网格并调用TheStore中的Utils.getText函数。 Firebug抛出一个Test.Utils is undefined
在TheStore.js的第6行Test.Utils is undefined
,在那个时间点,Test.Utils显然不存在,但Test.Utils2确实存在。
我的问题是......为什么Utils2存在,但Utils不存在? 我认为需要带入我需要的课程,因此允许我使用它们,但我想我错了。 我已经阅读了Sencha文档和众多主题,但没有什么真正有意义的,并没有真正解释这个例子。 有人能在这里找到一些见解吗? 我很感激。
**此外,我意识到我在这里做了一些愚蠢的事情,但这仅仅是一个例子,所以我不打算将全局的Utils结合起来或者根本不使用全局变量...我只想弄清楚要求选项。
UPDATE
感谢Izhaki在下面的回答,我想出了一些东西。 如果我想在我定义的类中使用必需的类,我将不得不等待创建对象(IE,使用initComponent),因此我的存储和网格代码更改为:
应用/存储/ TheStore.js
Ext.define('Test.store.TheStore', {
extend: 'Ext.data.Store',
requires: ['Test.model.TheModel'],
model: 'Test.model.TheModel'
});
应用程序/视图/ TheGrid.js
Ext.define('Test.view.TheGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.thegrid',
requires: ['Test.store.TheStore'],
store: 'TheStore',
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Phone', dataIndex: 'phone'},
{header: 'Hello', dataIndex: 'hello'}
],
// This is the change that works
initComponent: function() {
this.callParent();
this.store.loadData([
{name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
{name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
{name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
]);
}
});
这是有效的,但我的最后一个问题是......我是否必须在TheStore中对TheModel和/或TheGore中的TheStore有所需要? 看起来TheController正在处理所有这些需求,因为我可以在TheGrid中使用Test.Utils,但是TheGrid并没有具体声明它需要Test.Utils。
此外,来自Sencha文档的这个例子让我更加困惑,因为在创建TheStore之前我显然没有使用Test.Utils,但是这个例子似乎可以使用Child类而不必等待它初始化(使用initComponent) 。
这根本不是一个愚蠢的问题。
您可以将需求视为告诉ExtJS的一种方式:
“当你构造这个类的对象时,请确保首先动态加载所需的脚本”。
你对这一行是正确的:
requires: ['Test.Utils', 'Test.Utils2'],
在app.js
中不需要,原因是应用程序已经具有:
controllers: ['TheController'],
这与说你需要TheController
所在的js脚本相同(任何模型/视图/控制器/存储定义也意味着需要相关的脚本,即将动态加载)。
TheController
有:
requires: ['Test.model.TheModel', 'Test.Utils'],
这将动态加载这些 - 这就是为什么不需要app.js
同样的requires
;
你得到Firebug抛出Test.Utils
未定义的原因是你给一个配置( hello
)引用了一个尚未动态加载的对象 - 在构造TheStore
之前,范围内没有Test.Utils
。
没有它,HasMany关系根本不起作用
它有助于JSBuilder知道要包含哪些文件。 例如,如果您的视口使用边框布局,则会错误地不包含它,并且您必须使用用途或要求包含它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.