sencha touch 2 怎么使用tpl和data属性去填充formpanel

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);