extjs form java_[Java教程]ExtJS入门教程02,form也可以很优雅
[Java教程]ExtJS入门教程02,form也可以很优雅
0 2014-03-28 12:00:40
在上一篇《Extjs window 入门》中,我们已经看到了如何将一个form组件放到window中,今天我们来看看form的一些优雅的工作方式。
使用fieldDefaults,优雅的设置字段默认值
form中的子项,通常都是field控件,而这些field控件通常都会使用一些相同的配置,例如labelWidth、labelAlign等,如果在每一个field中设置这些属性就会显得比较繁琐,这个时候我们就需要用到fieldDefaults配置项: { xtype: "form", bodyPadding: 5, border: false, fieldDefaults: { labelWidth: 50, labelAlign: "right" }, items: [ { xtype: "textfield", fieldLabel: "姓名", name: "UserName" }, { xtype: "textarea", fieldLabel: "留言", name: "Comment" } ]}
使用load()方法,优雅的加载数据
向form中绑定数据的方法有好几种,我们先来看看如何通过异步的方式从服务器来获取数据的:win.down("form").getForm().load({ url: "form-data.ashx"});
服务器端返回的数据格式如下:{ success:true, data:{ UserName:'QeeFee', Comment:'齐飞是个程序员' }}
这个时候我们的form就会自动将data中的UserName和Comment绑定到界面中:
前面提到,通过ajax异步加载是众多加载方式中的一种,这时候小伙伴开始问了,那么其他的加载方式呢?
其他还有两种,是用来加载本地(内存)数据的,例如我们已经存在了一个data数据:var data = { UserName: 'QeeFee', Comment: '齐飞是个程序员'};
我们要把这个data绑定到form中,该怎么做呢?看下面的代码:win.down("form").getForm().setValues(data);
一样的效果,不再截图了。
接下来是第三种方式,加载record数据。首先,我们的record是需要先定义model的,不了解model是什么的朋友请移步>>ExtJS 4.2 教程-04:数据模型
首先定义一个数据模型:Ext.define("CommentModel", { extend: "Ext.data.Model", fields: [ { name: "UserName", type: "string" }, { name: "Comment", type: "string" } ]});
有了模型以后,我们需要来创建一个模型的对象:var comment = Ext.create("CommentModel", { UserName: 'QeeFee', Comment: '齐飞是个程序员'});
接下来我们就该完成绑定了:win.down("form").getForm().loadRecord(comment);
这个时候是不是有些怕麻烦的小伙伴已经开始抱怨了,这么麻烦啊……
其实不是这个样子的,麻烦自然有麻烦的道理。使用这种绑定方法,我们可以方便的更新模型对象的数据:win.down("form").updateRecord();var record = win.down("form").getRecord();Ext.MessageBox.alert("提示", record.get("UserName"));
看到了吧小伙伴,我们可以使用form逆向的更新record,是不是方便了很多呢?
使用submit()方法,优雅的提交数据
submit()方法和load()方法的用法非常相似,我们可以通过submit方法非常方便的将form表单数据提交到服务器:win.down("form").submit({ url: "form-submit.ashx", success: function (form, action) { Ext.Msg.alert('Success', action.result.msg); }});
我们来跟踪一下服务器接收到的数据:
界面超难看,试试用layout来组织界面
小伙伴看看我们上面的form界面,右侧空出很大一片,是不是很丑?
可能你会觉得为form和field加上width属性,问题自然就解决了,但是如果我们改变了window的宽度呢?仍然去修改form和field吗?
小伙伴们,是时候使用layout了!
关于extjs的layout,不明白的小伙伴可以参考我之前的文章>>ExtJS 4.2 教程-08:布局系统详解
接下来我们为window和form添加上布局配置:{ xtype: "form", bodyPadding: 5, border: false, layout: "form", fieldDefaults: { labelWidth: 50, labelAlign: "right" }, items: [ { xtype: "textfield", fieldLabel: "姓名", name: "UserName" }, { xtype: "textarea", fieldLabel: "留言", name: "Comment" } ]}
再次打开窗口,看看是不是好了很多:
接下来我们演示一个较为复杂的form:Ext.onReady(function () { var win = Ext.create("Ext.Window", { title: "complex form", width: 500, height: 300, layout: "fit", items: { xtype: "form", bodyPadding:5, border: false, layout: "form", fieldDefaults: { labelWidth: 60, labelAlign: "right" }, items: [ { xtype: "fieldcontainer", layout: "hbox", items: [ { xtype: "textfield", name: "UserName", fieldLabel: "用户名", flex: 1 }, { xtype: "textfield", name: "Age", fieldLabel: "年龄", flex: 1 } ] }, { xtype: "fieldcontainer", layout: "hbox", items: [ { xtype: "textfield", name: "TelPhone", fieldLabel: "电话", flex: 1 }, { xtype: "textfield", name: "Email", fieldLabel: "Email", flex: 1 } ] }, { xtype: "textarea", fieldLabel: "备注" } ] }, buttons: [ { text: "保存" }, { text: "取消" } ] }); win.show();});
这是一个稍微复杂一点的form,它用到了fieldcontainer来组织字段,效果如下:
小伙伴们,我决定把form的验证放到明天的文章中进行介绍,请原谅我偷懒。谢谢各位!
欢迎小伙伴们加入我们的“ExtJS 互助团”QQ群:2257136296
这篇文章还发布在了我的个人网站上面,链接地址:http://www.qeefee.com/article/extjs-starter-02-form
本文网址:http://www.shaoqun.com/a/87104.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。
JS
0
extjs form java_[Java教程]ExtJS入门教程02,form也可以很优雅相关推荐
- Java基础小白入门教程-----百知教育java基础学习1---胡鑫喆
Java基础小白入门教程(胡大大出品,彩蛋请自寻) 胡鑫喆 https://www.bilibili.com/video/BV1wE411V7Zo?from=search&seid=38511 ...
- TensorFlow 中文资源精选,官方网站,安装教程,入门教程,实战项目,学习路径。
转载至:http://www.nanjixiong.com/thread-122211-1-1.html Awesome-TensorFlow-Chinese TensorFlow 中文资源全集,学习 ...
- air调用java,AIR2.0入门教程:与Java应用交互
在之前的一篇文章中,我介绍了如何使用AIR2.0新增的NativeProcess类与本地进程进行交互和通讯,在那个例子里面我们使用了C++ 的代码,实际上只要是基于命令行的标准输入输出,AIR2.0的 ...
- JMS(Java消息服务)入门教程
什么是Java消息服务 Java消息服务指的是两个应用程序之间进行异步通信的API,它为标准消息协议和消息服务提供了一组通用接口,包括创建.发送.读取消息等,用于支持JAVA应用程序开发.在J2EE中 ...
- 最适合Java初学者学习的Java零基础入门教程
各种各样的编程语言不断崛起,但唯有Java是牢牢占据着老大的位置,目前几乎90%以上的大中型互联网应用系统在服务器端开发首选Java. 因此,也是吸引了不少年轻人投入到Java的学习之中. 所以,今天 ...
- java xfire_XFire完整入门教程
评论 # re: XFire完整入门教程 回复 更多评论 我是一名学生 近期做一个项目要用到这一方面的技术 我也在xfire中用到了list 也写了 一个aegis.xml 但还有个错误 ,请帮忙 ...
- xcode 新建java项目_Objective-C入门教程01:使用Xcode新建一个工程
Xcode 是 Apple 的集成开发环境(就像开发Java使用Eclipse一样),用于 iOS 和 Mac OS X 的开发.Xcode可以直接在App Store中安装.在 Mac 上安装 Xc ...
- Java学习之入门教程
Java编译软件有很多,下面小编来告诉大家具体怎么使用. 内容简要 1.如何构建Java开发环境? 2.编译器javac用法入门 3.运行Java编译结果文件 0.开始之前 -- JDK的下载与安装 ...
- html+php教程,HTML入门教程
1.HTML简介 HTML(Hypertext Markup Language)即超文本标记语言,是用于描述网页文档的一种标记语言. HTML 标记标签通常被称为 HTML 标签 (HTML tag) ...
最新文章
- 使用Javascript创建XML文件
- shopex PHP Notice,ShopEx PHP远程包含漏洞
- 2021湖北孝感高考成绩查询时间,2021年4月孝感自考成绩查询时间网址入口
- chrome调试的JavaScript官方技巧
- pcb中layer stack manager 中,右上角的layer pairs 、internal layer pairs和build-up,三者的区别?
- Android日志[进阶篇]二-分析堆栈轨迹(调试和外部堆栈)
- 未来计算机的景象,科幻场景即将实现,未来云电脑!
- C++STL笔记(十一):priority queue(带优先级的队列)详解
- 爱情的短命是众所周知的
- SciPy库主要功能
- html百度站内搜索代码,网站添加百度站内搜索的教程
- aplay 源码分析
- SNS光纤交换机命令及作用
- 记录:The field files exceeds its maximum permitted size of 1048576 bytes...解决方案【亲测有效】
- mysql jdbc 水晶报表,水晶报表Crystal Report2008使用JDBC连接MySQL数据库-详细步骤
- 超详细IPONE越狱教程详解
- 陶哲轩实分析 4.4 节习题试解
- Ant Design 台湾TW地区二级联动 数据
- Android 拼音转换工具PinyinUtils
- android:ListView的局部刷新