Extjs 简单模型和存储
Extjs simple model and store
我有一个简单的模型,假设:
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstname', type: 'string'},
{name: 'lastname', type: 'string'}
]
});
还有一个 json 文件,如下所示:
{
"DatabaseInJSON": {
"Users": [
{
"KeyFirstName": "John",
"KeyLastName": "Doe"
},{
"KeyFirstName": "James",
"KeyLastName": "Howlett"
}
],
"OtherStuffWeDontCareAbout": [
...
]
}
}
我的问题是:
如果我创建这样的商店,如何将属性 "firstname" 从我的模型映射到 "KeyFirstName" 从我的 json ?
Ext.define('my.custom.Store', {
extend: 'Ext.data.Store',
model: 'UserModel',
proxy: {
type: 'ajax',
url: 'path/to/my/file.json',
reader: {
type: 'json',
rootProperty: 'DatabaseInJSON'
}
}
});
通常,您的 Json 属性应与字段的相同名称相匹配,以便 reader 可以正确读取它们,将 'KeyFirstName' 映射到 'firstname' 我认为您的最好的选择是在模型的字段定义中创建一个 mapping。
这将为所有请求全局应用它,我相信它会在保存数据时反转映射。
要在您的案例中使用映射,您需要如下内容:
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstname', type: 'string', mapping: function(data) { return data.KeyFirstName; } },
{name: 'lastname', type: 'string', mapping: function(data) { return data.KeyLastName; } }
]
});
除了更改 JSON 数据的格式外,我能想到的唯一其他方法是覆盖 [=14= 的 read
或 getResponseData
方法]
查看演示 here,其中演示了这两种操作。
为了演示,我把你的商店变成了一个 memory
代理商店,我想你也在访问你的 rootProperty
错误,因为它应该是 rootProperty: 'DatabaseInJSON.Users'
代码:
Ext.application({
name: 'Fiddle',
launch: function() {
myData = {
"DatabaseInJSON": {
"Users": [{
"KeyFirstName": "John",
"KeyLastName": "Doe"
}, {
"KeyFirstName": "James",
"KeyLastName": "Howlett"
}],
"OtherStuffWeDontCareAbout": {}
}
};
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstname',
mapping: 'KeyFirstName',
type: 'string'
}, {
name: 'lastname',
convert: function(v, record) {
return record.data.KeyLastName;
},
type: 'string'
}]
});
Ext.define('my.custom.Store', {
extend: 'Ext.data.Store',
model: 'UserModel',
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'DatabaseInJSON.Users'
}
}
});
myStore = Ext.create('my.custom.Store', {
data: myData
});
console.log(myStore.getRange());
}
});
我有一个简单的模型,假设:
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstname', type: 'string'},
{name: 'lastname', type: 'string'}
]
});
还有一个 json 文件,如下所示:
{
"DatabaseInJSON": {
"Users": [
{
"KeyFirstName": "John",
"KeyLastName": "Doe"
},{
"KeyFirstName": "James",
"KeyLastName": "Howlett"
}
],
"OtherStuffWeDontCareAbout": [
...
]
}
}
我的问题是: 如果我创建这样的商店,如何将属性 "firstname" 从我的模型映射到 "KeyFirstName" 从我的 json ?
Ext.define('my.custom.Store', {
extend: 'Ext.data.Store',
model: 'UserModel',
proxy: {
type: 'ajax',
url: 'path/to/my/file.json',
reader: {
type: 'json',
rootProperty: 'DatabaseInJSON'
}
}
});
通常,您的 Json 属性应与字段的相同名称相匹配,以便 reader 可以正确读取它们,将 'KeyFirstName' 映射到 'firstname' 我认为您的最好的选择是在模型的字段定义中创建一个 mapping。
这将为所有请求全局应用它,我相信它会在保存数据时反转映射。
要在您的案例中使用映射,您需要如下内容:
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstname', type: 'string', mapping: function(data) { return data.KeyFirstName; } },
{name: 'lastname', type: 'string', mapping: function(data) { return data.KeyLastName; } }
]
});
除了更改 JSON 数据的格式外,我能想到的唯一其他方法是覆盖 [=14= 的 read
或 getResponseData
方法]
查看演示 here,其中演示了这两种操作。
为了演示,我把你的商店变成了一个 memory
代理商店,我想你也在访问你的 rootProperty
错误,因为它应该是 rootProperty: 'DatabaseInJSON.Users'
代码:
Ext.application({
name: 'Fiddle',
launch: function() {
myData = {
"DatabaseInJSON": {
"Users": [{
"KeyFirstName": "John",
"KeyLastName": "Doe"
}, {
"KeyFirstName": "James",
"KeyLastName": "Howlett"
}],
"OtherStuffWeDontCareAbout": {}
}
};
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstname',
mapping: 'KeyFirstName',
type: 'string'
}, {
name: 'lastname',
convert: function(v, record) {
return record.data.KeyLastName;
},
type: 'string'
}]
});
Ext.define('my.custom.Store', {
extend: 'Ext.data.Store',
model: 'UserModel',
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'DatabaseInJSON.Users'
}
}
});
myStore = Ext.create('my.custom.Store', {
data: myData
});
console.log(myStore.getRange());
}
});