formpanel是sencha touch的一个表单。有时候我们需要批量将数据填入表单中。
表单定义
Ext.define('DingCan.view.order.OrderInStoreComfirm', {
extend : 'Ext.form.Panel',
xtype : 'OrderInStoreComfirm',
config : {
fullscreen : true,
title : '堂食点菜',
scrollable : {
direction : 'vertical',
directionLock : true
},
items : [{
xtype : 'fieldset',
title : '请扫描餐牌上的二维码',
defaults : {
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items : [{
xtype : 'textfield',
name : 'barcode',
placeHolder : '点击扫描二维码'
}]
}, {
xtype : 'fieldset',
title : '或者向餐厅索取密码',
defaults : {
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items : [{
xtype : 'textfield',
name : 'passcode',
placeHolder : '请输入密码'
}]
}, {
xtype : 'fieldset',
defaults : {
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items : [{
xtype : 'button',
action : 'submmitOrder',
text : '立即下单'
}]
}, {
xtype : 'fieldset',
title : '堂食详情',
itemId : 'orderdetails',
defaults : {
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
data : {
name : '吴俊仪',
cellphone : '13983098209',
orders : [{
name : '鸭肉',
quantity : 1,
price : 15,
subtotal : 15
}, {
name : '水煮香辣虾',
quantity : 2,
price : 30,
subtotal : 60
}]
},
tpl : ['<p>订餐人:{name}</p>',
'<p>电话:{cellphone}</p>',
'<p>就餐详情:</p>',
'<tpl for="orders">',
'<p>{food} {quantity}份*{price}={subtotal}元</p>',
'</tpl></p>'
]
/*
* masked : { xtype : 'loadmask', message : '数据加载中.' }
*/
}]
},
initialize : function() {
this.callParent(arguments);
}
})
注意tpl 和data 是怎么迭代的。
另外我们还可以动态的给itmeid:'orderdetails' 添加data数据
allSubmitionData为自己定义的oje{},也可以为数组[]
var OrderInStoreComfirm = Ext.create('DingCan.view.order.OrderInStoreComfirm');
OrderInStoreComfirm.down('#orderdetails').setData(allSubmitionData);