ExtJS的FormPanel中的组件使用load加载远程的JSON数据的方法
本文由发表于7年前 | Javascript | 暂无评论 |  被围观 11,307 views+

在创建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
});
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/extjs-formpanel-components-of-load-using-the-load-method-of-a-remote-json-data.html
关键字: , ,
arthinking 指弹吉他 && 技术 more
分享到:
 
2011 8/6
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Ubuntu安装方案 超炫界面 VirtualBox让你从windows到Linux适应的完美过渡 2011/5/2
2 连接不上Internet,那让局域网更丰富吧 2012/5/22
3 JSF笔记 – 导航模型 静态导航和动态导航 2011/12/3
4 Hibernate一对多单向关联和双向关联映射方法及其优缺点 2011/5/28
5 Java基础笔记 – 数组 二维数组 三维数组 Arrays类 2011/10/29
6 纯Javascript打造的红色玫瑰花 1k Rose 2012/2/13
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.