ExtJS的FormPanel中的组件使用load加载远程的JSON数据的方法
本文由发表于6年前 | Javascript | 暂无评论 |  被围观 13,770 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 Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 8/6
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 乐器销售管理系统 | Project 2011/11/15
2 Hibernate的框架结构及其工作流程 2011/5/27
3 为什么不建议调用sun包,如何通过其他方法确定调用者 2015/3/9
4 Tomcat源码分析 – HttpServlet的源码分析 2011/11/10
5 IE6下常见的几个CSS兼容问题 2011/4/10
6 Hibernate一对多关联映射的配置及其级联删除问题 2011/5/26
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

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

联系我们:admin@itzhai.com

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