很难理解模型的“关联”功能以及如何理解 开发人员可以通过关联访问嵌套数据。
这是我们尝试解析的一个简单的 XML 文件。
<?xml version="1.0" encoding="UTF-8"?>
<contacts>
<contact>
<id>1</id>
<name>Bob Jones</name>
<emails>
<email>
<addr><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525a5f5e55430170545f5d1e535f5d" rel="noreferrer noopener nofollow">[email protected]</a></addr>
<display>B. Jones 1</display>
</email>
<email>
<addr><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1d9dcddd6c081f3d7dcde9dd0dcde" rel="noreferrer noopener nofollow">[email protected]</a></addr>
<display>B. Jones 2</display>
</email>
</emails>
</contact>
<contact>
<id>2</id>
<name>John Rodeo</name>
<emails>
<email>
<addr><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="553f273a31303a6415313a387b363a38" rel="noreferrer noopener nofollow">[email protected]</a></addr>
<display>J. Rodeo 1</display>
</email>
<email>
<addr><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b8a0bdb6b7bda1e092b6bdbffcb1bdbf" rel="noreferrer noopener nofollow">[email protected]</a></addr>
<display>J. Rodeo 2</display>
</email>
</emails>
</contact>
</contacts>
这是相关模型
Ext.define('MyApp.model.Contact', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.Emails'
],
fields: [
{
name: 'id'
},
{
name: 'name'
}
],
hasMany: {
model: 'MyApp.model.Emails',
autoLoad: true,
foreignKey: 'addr',
name: 'emailAddresses'
}
});
Ext.define('MyApp.model.Emails', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.Contact'
],
idProperty: 'addr',
fields: [
{
name: 'addr'
},
{
name: 'display'
}
],
belongsTo: {
model: 'MyApp.model.Contact'
}
});
最后,这是商店:
Ext.define('MyApp.store.MyXmlStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Contact'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyXmlStore',
model: 'MyApp.model.Contact',
proxy: {
type: 'ajax',
url: 'data/data.xml',
reader: {
type: 'xml',
record: 'contact'
}
}
}, cfg)]);
}
});
我们创建了一个简单的网格并将其链接到商店......然后, 它显示联系人(快速 ascii 渲染)
+---------------------------+
| My Grid Panel |
+-----+---------------------+
| Id | Name |
+-----+---------------------+
| 1 | Bob Jones |
| 2 | John Rodeo |
但是我们完全不知道如何检索关联的电子邮件 记录。
我读到 GridPanel 可能无法正确渲染关联的 数据。这对我们来说不是问题——我们只是想弄清楚 我们如何使用此模型数据以编程方式访问它。
例如,假设我们想创建一个附加的简单 onXmlstoreLoad 事件 到商店,我们只想在加载后 console.log() 电子邮件地址 -- 正确的语法是什么?
我们尝试了推荐的方法:
onXmlstoreLoad: function(store, records, successful, operation, options) {
console.log(store.emailAddresses.getAt(0));
}
但这会导致 undefined reference 。
我认识到这可能归结为我们错误地描述了我们的模型,但我们已经尝试过 几十种不同的配置都无法判断是否有问题 数据是否没有进入商店...或者我们是否无法引用 语法正确。
最佳答案
终于弄清楚我缺少什么才能成功正确地读取嵌套模型。一旦我们正确填充了我们的存储,访问嵌套数据记录就变得很简单。
我们缺少的关键部分与代理/读取器有关。每个模型都需要有自己的代理读取器,以便您可以指定“记录”和“根”参数。
我建议任何偶然发现此线程的人查看由 Neil McGuigan 维护的优秀网站 - http://extjs-tutorials.blogspot.com/2012_05_01_archive.html 。您应该遵循大量重要提示和最佳实践。
尼尔为我们的解决方案提供的一个重要线索是,开发人员应该将代理和读取器卡在模型上,而不是卡在商店上。这使得管理 Xml 特定记录/根参数变得简单。
这是一个艰难的过程...对于任何第一次深入了解 Extjs 的人来说,我强烈建议您与 Firebug 进行近距离接触。深入了解 extjs 源代码开始回答许多有关各个部分如何组合在一起的重要问题。
extjs 代码库有非常详细的文档。尽管开发人员显然是 Javascript 黑带,这有时会让跟随他们前进的方向成为一个挑战,但最终结果是值得付出努力的。
如果您正在寻找工作代码...
我们的商店
Ext.define('MyApp.store.MyXmlStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Contact'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyXmlStore',
model: 'MyApp.model.Contact',
listeners: {
load: {
fn: me.onXmlstoreLoad,
scope: me
}
}
}, cfg)]);
},
onXmlstoreLoad: function(store, records, successful, operation, options) {
console.log("onXmlstoreLoad:"+ successful);
console.log(s.getAt(0).emailAddressesStore.getAt(0));
}
});
还有我们的模型
Ext.define('MyApp.model.Contact', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.Emails'
],
fields: [
{
mapping: 'id',
name: 'id',
type: 'int'
},
{
mapping: 'name',
name: 'name',
type: 'string'
}
],
hasMany: {
associationKey: 'emails',
model: 'MyApp.model.Emails',
name: 'emailAddresses'
},
proxy: {
type: 'ajax',
url: 'data/data.xml',
reader: {
type: 'xml',
root: 'contacts',
record: 'contact'
}
}
});
Ext.define('MyApp.model.Emails', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.Contact'
],
fields: [
{
mapping: 'addr',
name: 'addr',
type: 'string'
},
{
mapping: 'display',
name: 'display',
type: 'string'
}
],
proxy: {
type: 'ajax',
url: 'data/data.xml',
reader: {
type: 'xml',
root: 'emails',
record: 'email'
}
},
belongsTo: {
model: 'MyApp.model.Contact'
}
});
关于xml - 如何访问Extjs嵌套模型(从Xml加载)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11784192/