ExtJS的FormPanel中的组件使用load加载远程的JSON数据的方法

转自：http://www.itzhai.com/extjs-formpanel-components-of-load-using-the-load-method-of-a-remote-json-data.html

在创建FormPanel时，指定一个reader，下面在reader配置项中创建了一个JsonReader去解析服务器端返回的Json数据，JsonReader中使用mapping把对应的name中的值映射到表格对应的组件中：

var formPanel = new Ext.form.FormPanel({
	labelAlign: 'right',
	labelWidth: 100,
	frame: true,
	width: 685,
	layout:'form',
	fileUpload: true,
	defaultType: 'textfield',
	defaults: {width:200},
	reader: new Ext.data.JsonReader({root:'product'},
			[{name:'productId',mapping:'productId'},
			 {name:'name',mapping:'name'},				 
			 {name:'typecom',mapping:'typecom'},
			 {name:'baseprice',mapping:'baseprice'},
			 {name:'marketprice',mapping:'marketprice'},
			 {name:'sellprice',mapping:'sellprice'},
			 {name:'code',mapping:'code'},
			 {name:'brandCode',mapping:'brandCode'},
			 {name:'sexrequest',mapping:'sex'},				 
			 {name:'model',mapping:'model'},
			 {name:'weight',mapping:'weight'},
			 {name:'buyexplain',mapping:'buyexplain'},
			 {name:'description',mapping:'description'}]),
	items: [{
		xtype:'hidden',
		name:'productId',
	},{
		fieldLabel: '产品名称',
		name: 'name',
		id: 'name',
		allowBlank: false
	},com_productType ,{
		fieldLabel: '采购价',
		name: 'baseprice',
		id: 'baseprice',
		allowBlank: false
	},{
		fieldLabel: '市场价',
		name: 'marketprice',
		id: 'marketprice',
		allowBlank: false
	},{
		fieldLabel: '销售价',
		name: 'sellprice',
		id: 'sellprice',
		allowBlank: false
	},{
		fieldLabel: '货号',
		name: 'code',
		id: 'code',
		allowBlank: false
	},com_brand, com_sex,{
		fieldLabel: '型号',
		name: 'model',
		id: 'model',
		allowBlank: false
	},{
		fieldLabel: '重量',
		name: 'weight',
		id: 'weight',
		allowBlank: false
	},{
		fieldLabel: '购买说明',
		name: 'buyexplain',
		id: 'buyexplain',
		allowBlank: false
	},{
		xtype: 'htmleditor',
		name: 'description',
		fieldLabel: '产品介绍',
		width: 600,
		height:150,
		allowBlank: false
	}]
});

然后在创建和显示formPanel的地方调用formPanel的load方法，向服务器请求数据，然后加载到formPanel中：

formPanel.form.load({
	url:'product/Product-getProductById.action?productId='+productId
});