Extjs4 view 数据视图类

	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 的综合使用。