ExtJS4学习笔记八－－Template的使用
1、append方法
11、使用模板成员函数
13、Ext.view.View示例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:'div.thumb-wrap',emptyText: '请录入商品'});//产品面板var productViewPanel = Ext.create('Ext.panel.Panel',{autoScroll:true,width : 490,flex : 3,layout : 'fit',bodyStyle:'background-color:#FFFFFF', items: productView});Ext.create('Ext.panel.Panel',{renderTo: document.body,frame:true,width : 500,height: 200,layout:'vbox',title:'产品录入', items: [inputForm, productViewPanel]});
