正如您将注意到 JSON在同一字段名称中返回不同的值,因此我已使用dot notation
绑定到所需的值。但是我在不同的类上使用相同的面板,所以我需要找出一种更好的方法来绑定指定的值。我试图在mapping
上使用BookStatModel
,但无法成功。
如何缩短/抢夺使用对同一字段名称具有不同值的JSON的数据绑定。
我无法改变服务器响应;
{
"success": true,
"msg": "OK",
"count": 5,
"data": [
{
"bid": 1000655,
"code": "TOTALPENDING",
"totalcount": 1
},
{
"bid": 1000655,
"code": "TOTALLEFT",
"totalcount": 2
},
我通过VM商店获得JSON;
// VM
stores: {
bookStore: {
model: 'MyApp.model.base.BookStatModel',
autoLoad: true,
session: true,
proxy: {
url: MyApp.Globals.getUrl() + '/bonustrans/stat/book',
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'data'
}
}
},
// Model itself
Ext.define('MyApp.model.base.BookStatModel', {
extend: 'MyApp.model.base.StatResultModel',
requires: [
'MyApp.Globals',
'MyApp.FldNames'
],
fields: [
{name: 'bid', type: MyApp.FldTypes.INT},
{name: 'code'}
//{name: 'currentBonus', mapping: 'bookStore.data.items.1.totalcount', type: 'integer'},
//{name: 'pendingBonus', mapping: 'bookStore.data.items.0.totalcount', type: 'integer'},
//{name: 'totalBonus', mapping: 'bookStore.data.items.2.totalcount', type: 'integer'}
]
});
最后使用panel
config;
bind
{
xtype: 'infocard',
flex: 1,
margin: '0 5 0 0',
bodyStyle: {
"background-color": "#DFE684"
},
items: [{
xtype: 'container',
layout: {
type: 'hbox'
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'middle',
pack: 'end'
},
flex: 2,
items: [{
xtype: 'container',
userCls: 'infocardCount',
bind: {
//In another 'infocard' binds to 'items.0.totalcount'
html: '{bookStore.data.items.1.totalcount}'
//html: '{currentBonus}' //Couldn't render value
},
flex: 1
}, {
xtype: 'component',
height: 10
}, {
xtype: 'container',
userCls: 'infocardCode',
padding: '10',
bind: {
//In another 'infocard' binds to 'items.0.code'
html: '{bookStore.data.items.1.code}'
},
flex: 1
}]
},
答案 0 :(得分:2)
公式是答案对于您的设计,这应该有效:
https://fiddle.sencha.com/#view/editor&fiddle/2edq
但我的建议是使用奖金网格,其中bonustype是一列(currentBonus,pendingBonus,totalBonus)