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

在创建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
});

arthinking wechat
欢迎关注itzhai公众号