Ext.onReady(function(){ Ext.QuickTips.init(); var inputForm = Ext.create('Ext.form.Panel',{ bodyPadding: 5, width : 490, flex : 2, fieldDefaults:{//统一设置表单字段默认属性 labelSeparator :':',//分隔符 labelWidth : 60,//标签宽度 width : 150,//字段宽度 msgTarget : 'side', allowBlank : false, labelAlign : 'right' }, layout: {//设置容器字段布局 type: 'hbox', align: 'middle'//垂直居中 }, defaultType: 'textfield',//设置表单字段的默认类型 items:[{ fieldLabel:'产品名称', name : 'productName' },{ fieldLabel:'数量', xtype : 'numberfield', name : 'productNum' },{ fieldLabel:'金额', xtype : 'numberfield', name : 'productPrice' }], fbar : [{ text : '添加', handler : function(){ if(inputForm.getForm().isValid()){ var data = inputForm.getForm().getValues(); var product = Ext.ModelMgr.create(data, 'ProductInfo'); productStore.add(product); inputForm.getForm().reset(); } } }] }); //创建数据模型 Ext.regModel('ProductInfo', { fields: ['productName','productNum','productPrice'] }); //创建产品数据源 var productStore = Ext.create('Ext.data.Store',{ autoLoad : true, data : [], model : 'ProductInfo', proxy: { type: 'memory', reader: { type: 'json', root: 'datas' } } }); //定义模板 var productTpl = new Ext.XTemplate( '<table border=1 cellspacing=0 cellpadding=0 width=100%>', '<tr><td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td></tr>', '<tpl for=".">', '<tr><td>{productName}</td><td>{productNum}</td><td>{productPrice}</td></tr>', '</tpl>', '</table>' ); var productView=Ext.create('Ext.view.View',{ store:productStore, tpl:productTpl, deferEmptyText:false, itemSelector:'', emptyText:'请录入商品' }); var productViewPanel=Ext.create('Ext.panel.Panel',{ autoScroll:true, width:500, layout:'fit', flex:3, bodyStyle:'background-color:#FFFFFF', items:productView }); var panel=Ext.create('Ext.panel.Panel',{ renderTo:Ext.getBody(), fream:true, width:500, height:300, layout:'vbox', title:'产品新增', items:[inputForm,productViewPanel] }); });
XTemplate 和 Ext.view.View 的综合使用。