- 浏览: 916456 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (498)
- J2EE (52)
- 数据库 (17)
- java基础 (43)
- web技术 (19)
- 程序设计 (6)
- 操作系统 (18)
- IT资讯 (7)
- 我的IT生活 (12)
- 学习笔记 (9)
- Jquery (25)
- JavaScript (18)
- spring (40)
- Hibernate (12)
- Struts (10)
- YUI (2)
- Extjs (22)
- .net (0)
- Eclipse (10)
- 社会主义 (2)
- 服务器 (9)
- CSS (8)
- 网络安全 (16)
- 版本控制 (9)
- PHP (2)
- Oracle (42)
- SQL server (1)
- Mysql (11)
- 项目管理 (3)
- 开发工具使用 (10)
- SQL语句 (7)
- Perl (0)
- Shell (6)
- 漏洞 (4)
- ibatis (5)
- hacker (2)
- SQL注入 (6)
- Hacker工具 (2)
- 入侵和渗透 (7)
- 插件/组件 (2)
- 最爱开源 (5)
- 常用软件 (2)
- DOS (1)
- HTML (2)
- Android (9)
- CMS (1)
- portal (8)
- Linux (7)
- OSGI (1)
- Mina (5)
- maven (2)
- hadoop (7)
- twitter storm (2)
- sap hana (0)
- OAuth (0)
- RESTful (1)
- Nginx (4)
- flex (1)
- Dubbo (1)
- redis (1)
- springMVC (1)
- node.js (1)
- solr (2)
- Flume (1)
- MongoDB (2)
- ElasticSearch (1)
最新评论
-
M_drm:
请问要怎么设置浏览器才不报没权限呢?
用JS在页面调用本地可执行文件的方法(ACTIVEX) -
Alexniver:
官方文档。When importing data into I ...
mysql导入数据过慢 解决方法 -
camelwoo:
我记得 Criteria 可以做连接查询与子查询,也可以做分页 ...
Hibernate总结篇二 -
zhenglongfei:
楼主如果SubKeyName 这个节点不存在,怎么办??怎么用 ...
Java操作注册表 -
yxx676229549:
用log4j 2 了
logback
OK,前面我们已经学过了GridPanel,TabPanel,TreePanel这三种重要的面板,今天我们再下一城,拿下FormPanel这个面板。提到表单Form,那是做WEB开发的无人不晓了。那么,在ExtJS中,对应表单Form的封装组件就是FormPanel,它的重要性就不言而喻了。为了详细说明FormPanel中的各项属性和各种字段类型,我找了一个综合点的例子,这个例子来源于网络,被人转了多次也不知道原作者是谁了,在这里我要向原作者致敬,因为这个例子写的很用心。唯一有点缺陷就是在IE6.0和FireFox2.0上测试布局效果都有点小问题,所以我这里把它改造了一下。在主流浏览器上测试通过,并且加入了大量的注释,确保大家有点ExtJS基础的能够一看就懂。注明一点就是,我使用的ExtJS版本是2.02!
好啦。入正题。看页面效果先:
我们先来看看前台JS:
再来看看前台HTML文件:
最后是后台处理表单提交的JSP组件:resForm.jsp
大家在学习表单的时候首先要学习一个一个小字段控件,然后是FormPanel的基本配置选项,有了了解之后再开始做FormPanel的布局以及和其它组件的搭配使用,最后当然就是关注它如何和服务器端交互,譬如是采用原始的HTML Form提交的方式,还是AJAX异步提交的方式。还有客户端如何发送请求以及如何处理返回的JSON数据,服务器如何接受参数以及返回JSON格式的处理结果等等。这些都通了之后,再看看它的源码(JS好一点的也可以开始就从源码下手),遇到问题再查查网络,查查API,这样你就彻底地征服它了。
好啦。入正题。看页面效果先:
我们先来看看前台JS:
Ext.onReady(function() { Ext.QuickTips.init();// 浮动信息提示 Ext.form.Field.prototype.msgTarget = 'side';// 设置控件的错误信息显示位置,主要可选的位置有:qtip,title,under,side,[elementId] Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地 var simpleForm = new Ext.FormPanel({ renderTo : document.body, labelAlign : 'left', title : '表单例子', buttonAlign : 'right', bodyStyle : 'padding:5px', width : 600, frame : true, labelWidth : 80, items : [{ layout : 'column',// columnlayout border : false,// 没有边框 labelSeparator : ':',// 标题的分隔符号我们用中文冒号代替英文的冒号(labelSeparator:':')。 // coulmnLayout里的控件将定义在items里 items : [{ columnWidth : .5,// 设置了该列的宽度占总宽度的50%(columnWidth:.5) layout : 'form',// formlayout用来放置控件 border : false,// 没有边框 items : [{ xtype : 'textfield',// 在formlayout里有一个类型为textfield'(xtype:'textfield')的输入控件 fieldLabel : '姓名',// 控件标题为姓名 name : 'name',// 输入框(input)的name属性设置“name” anchor : '90%'// 输入框的长度为列宽减去标题的宽度后的90%(anchor:'90%'),余下的10%的是给显示错误信息图标用的。 }] }, { columnWidth : .25,// 在加入性别的radio控件时就要注意了,这里需要加入两个radio,第一radio是有标题的,第二是没有的,而且两个radio加起来的宽度应该正好是余下的列宽(50%) layout : 'form', border : false, items : [{ style : 'margin-top:5px',// 设置一个css属性,顶部的外补丁为5px(style:'margin-top:5px'),原因是为了选择按钮和标题对齐,大家可以将该属性去掉然后看看效果。 xtype : 'radio',// Formlayout里加入了一个类型为radio的控件 fieldLabel : '性别',// 控件的标题是性别 boxLabel : '男',// 控件的选择显示文本是男 name : 'sex',// input的name属性值是sex checked : true,// 该控件默认是已选的 inputValue : '男',// 控件的值(value)是男 anchor : '95%'// input的宽度是95% }] }, { columnWidth : .25,// 我们已经设置了3列,3列的列宽分别为50%、25%、25% layout : 'form', labelWidth : 0,// 标题的宽度设置为0 labelSeparator : '',// 标题分隔符号为空 hideLabels : true,// 第二个raido控件的列设置就有所不同,因为它不需要标题,所以要设置隐藏标题 border : false, items : [{ style : 'margin-top:5px', xtype : 'radio', fieldLabel : '', boxLabel : '女', name : 'sex', inputValue : '女', anchor : '95%' }] }] } // 上面是第一行,以下每行布局同上! , { layout : 'column', border : false, labelSeparator : ':', items : [{ columnWidth : .5, layout : 'form', border : false, items : [{ xtype : 'datefield',// 控件的类型为datefield fieldLabel : '出生日期', name : 'birthday', anchor : '90%' }] }, { columnWidth : .5, layout : 'form', border : false, items : [{ xtype : 'combo',// 控件的类型设置成combo // 这里定义了一个sotre属性,就是选择值存储的地方,因为是在客户端的数据,所以使用了一个简单存储(SimpleStore)。 store : new Ext.data.SimpleStore({ // 通过一个数组定义了returnValue和displayText两个字段。retrunValue字段指定是提交给后台的值,displayText字段指定是在下拉中显示的选择值。 fields : ["returnValue", "displayText"], // 定义了几组数据.每组数据都是根据fiedls的定义来组成的,数组里第一个值就是retrunValue的值,第二个值就是displayText的值,例如[1,'小学'],就表示retrunValue是1,displayText是小学。 data : [[1, '小学'], [2, '初中'], [3, '高中'], [4, '中专'], [5, '大专'], [6, '大学']] }), valueField : "returnValue",// 设置下拉选择框的值 displayField : "displayText",// 设置下拉选择框的显示文本 mode : 'local',// 数据是在本地 forceSelection : true,// 必须选择一个选项 blankText : '请选择学历',// 提交form时,该项如果没有选择,则提示错误信息"请选择学历" emptyText : '选择学历',// 在没有选择值时显示为选择学历 hiddenName : 'education',// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到数据的,这个大家一定要注意。 editable : false,// 该下拉列表只允许选择,不允许输入 triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。 allowBlank : false,// 该选项值不允许为空 fieldLabel : '学历',// 控件的标题是学历 name : 'education',// 再次提醒,name只是下拉列表的名称 anchor : '90%'// input的宽度是90% }] }] } // 上面是第二行,下面我们要创建一个checkbox选项输入。checkbox的设置和radio的设置大同小异,大家注意列宽的定义就行。 , { layout : 'column', border : 'false', labelSeparator : ':', items : [{ columnWidth : .35, layout : 'form', border : false, items : [{ xtype : 'checkbox', fieldLabel : '权限组', boxLabel : '系统管理员', name : 'popedom', inputValue : '1', anchor : '95%' }] }, { columnWidth : .2, layout : 'form', labelWidth : 0, labelSeparator : '', hideLabels : true, border : false, items : [{ xtype : 'checkbox', fieldLabel : '', boxLabel : '管理员', name : 'pepedom', inputValue : '2', anchor : '95%' }] }, { columnWidth : .2, layout : 'form', labelWidth : 0, labelSeparator : '', hideLabels : true, border : false, items : [{ xtype : 'checkbox', fieldLabel : '', boxLabel : '普通用户', name : 'pepedom', inputValue : '3', anchor : '95%' }] }, { columnWidth : .25, layout : 'form', labelWidth : 0, labelSeparator : '', hideLabels : true, border : false, items : [{ xtype : 'checkbox', fieldLabel : '', boxLabel : '访客', name : 'pepedom', inputValue : '4', anchor : '95%' }] }] } // 上面是第三行,下面的两个输入框主要是测试通过vtypes属性来验证输入框的输入的 , { layout : 'column', border : false, labelSeparator : ':', items : [{ columnWidth : .5, layout : 'form', border : false, items : [{ xtype : 'textfield', fieldLabel : '电子邮件', name : 'email', vtype : 'email',// 这里的定义和普通的文本输入框没什么区别,只是多了一个vtypes的属性定义。Vtypes里总共定义了email、url、alpha和alphanum四种类型数据格式,email和url这个不用介绍了,呵呵。alpha是字母和下划线的组合,alphanum是字母、下划线和数字的组合。 allowBlank : false, anchor : '90%' }] }, { columnWidth : .5, layout : 'form', border : false, items : [{ xtype : 'textfield', fieldLabel : '个人主页', name : 'url', vtype : 'url', anchor : '90%' }] }] } // 上面是第四行,下面要加入一个tabpanel,加入3个tab页。 , { xtype : 'tabpanel',// 注意将xtype类型设置为'tabpanel' plain : true,// 将标签页头的背景设置为透明的 activeTab : 0,// 当前活动的标签页是第一页 height : 235,// 高度设置为235px defaults : { bodyStyle : 'padding:10px' },// tab页的面板使用内补丁10px items : [ // 第一页主要有两个输入控件,一个是vtypes类型alphanum的登录输入框和一个密码输入框。 { title : '登录信息',// 标签标题是登录信息 layout : 'form',// 控件容器是formlayout defaults : { width : 230 },// 控件的默认宽度是230px defaultType : 'textfield',// 默认控件类型是textfield items : [{ fieldLabel : '登录名', name : 'loginID', allowBlank : false, vtype : 'alphanum', allowBlank : false }, { inputType : 'password',// 密码输入框需要定义input控件的类型为password fieldLabel : '密码', name : 'password', allowBlank : false }] }, // 第二个标签页里有numberfield、timefield和textfield三个控件 { title : '数字时间字母', layout : 'form', defaults : { width : 230 }, defaultType : 'textfield', items : [{ xtype : 'numberfield',// 只能输入数字的输入控件 fieldLabel : '数字', name : 'number' }, { xtype : 'timefield',// 时间输入控件 fieldLabel : '时间', name : 'time' }, { fieldLabel : '纯字母', name : 'char', vtype : 'alpha' }] }, { title : '文本区域', layout : 'fit',// 为了让textarea自适应面板容器,使用了fitlayout作为它的布局 items : { xtype : 'textarea',// 设置类型为textarea id : 'area', fieldLabel : '' } }] }], // 为form添加按钮了,在formpanel的buttons属性中我们加入了一个保存按钮和取消按钮 buttons : [{ // 在buttons里定义的按钮默认是Ext.Button,所以按钮的属性定义可以查看Ext.Button的API。在这里两个按钮都没用到其它属性,只是设置了显示文本(text)和单击事件。 text : '保存', handler : function() { // 在formpanel类中,form属性指向的是formpanle里的basicform对象,我们可通过formpanle.form来使用该basicform对象。在被例子,我们已经将formpanel对象赋值给了simpleForm这个变量,所以我们可以通过simpleForm.form访问面板里的basicform对象。 if (simpleForm.form.isValid()) { // 保存按钮要做的就是先做basicform的客户端验证,验证通过了则设置该按钮状态为disable,防止2次提交。然后调用simpleForm.form.doAction方法提交数据 this.disabled = true; // doAction方法的第一个参数“submit”的意思是表示执行的是提交操作,提交的后台页面是test.jsp(url:'test.asp'),提交方式是post(method:'post'),没有其它提交参数(params:'') simpleForm.form.doAction('submit', { url : 'resForm.jsp', method : 'post', params : '', // 提交成功后执行success定义的函数,后台返回的数据格式是需要我们注意的,一定要json格式,而且必须包含“success:true”,不然不会执行success定义的函数。 // success定义的函数返回两个参数,第一是form本身,第二个是ajax返回的响应结果,在action.result这个json数组了保存了后台返回的数据。 success : function(form, action) { // 例如返回的json结构是"{success:true,data:'成功保存!'}", Ext.Msg.alert('操作', action.result.data); this.disabled = false; }, // 定义failure函数,就是网络通讯存在问题的时候将显示错误信息。 failure : function() { Ext.Msg.alert('操作', '保存失败!'); this.disabled = false; } }); } // 如果想form按以前的老办法提交,可以在formpanel的定义中加入一下设置: // onSubmit: Ext.emptyFn, // submit: function() { // this.getEl().dom.submit();} // 第一个设置的目的是取消formpanel的默认提交函数。第二就是设置新的提交方式为旧方式提交。 } }, { // 取消按钮就是简单的reset一下form的控件 text : '取消', handler : function() { simpleForm.form.reset(); } }] }); });
再来看看前台HTML文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="resources/js/ext-base.js"></script> <script type="text/javascript" src="resources/js/ext-all.js"></script> <script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="resources/js/form.js"></script> </head> <body></body> </html>
最后是后台处理表单提交的JSP组件:resForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%> <%="{success:true,data:'成功保存!'}"%>
大家在学习表单的时候首先要学习一个一个小字段控件,然后是FormPanel的基本配置选项,有了了解之后再开始做FormPanel的布局以及和其它组件的搭配使用,最后当然就是关注它如何和服务器端交互,譬如是采用原始的HTML Form提交的方式,还是AJAX异步提交的方式。还有客户端如何发送请求以及如何处理返回的JSON数据,服务器如何接受参数以及返回JSON格式的处理结果等等。这些都通了之后,再看看它的源码(JS好一点的也可以开始就从源码下手),遇到问题再查查网络,查查API,这样你就彻底地征服它了。
发表评论
-
UI组件:ext、JqueryEasyUI、miniui、dhtmlx及自定义页面
2013-05-16 13:43 3976UI组件:ext、JqueryEasyUI、miniui、dh ... -
JavaScript大牛:Douglas Crockford
2013-03-28 16:02 850JavaScript大牛:Douglas Crockford ... -
详解Ext + Struts2 文件上传
2012-05-18 10:34 3524前阵子项目里面需要实现文件上传的功能,前后换了包括我在内的三个 ... -
Extjs 中的cookie设置
2012-04-25 17:34 2123发现Extjs中有两个cookie 其一:设置cookie如 ... -
ExtJS column布局后labelField无法显示的问题
2012-04-18 10:43 1989第一次用Extjs的column布局时遇见了很多问题,记录下来 ... -
<转>Extjs中的提示信息用法
2012-04-18 09:43 5010ExtJS.form中msgTarget Ext表单提示 ... -
Extjs表单组件及属性
2012-04-18 09:34 1348Ext.form.Action 配置项: ... -
ext2.0 Ext.MessageBox.confirm 值传递
2012-04-11 10:14 1315function showEditPanel(mID){ ... -
ExtJs TreePanel使用TreeLoader在IE下无法正常加载显示的解决方法
2012-03-28 16:12 1829小菜使用如下代码生成T ... -
ExtJS 开发总结
2012-03-17 23:19 944http://nything.iteye.com/blog/4 ... -
Ext Theme Builder /Ext 皮肤定制
2011-12-29 14:52 1793Spket 定制皮肤功能: spket 支持定制EXT皮肤功能 ... -
ExtJS Button的事件和方法定义
2011-12-28 12:24 15314ExtJS Button的事件和方法定义: Ext.onR ... -
IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
2011-12-27 16:30 2945在使用<input id="file_upl& ... -
ext TreePanel使用
2011-11-25 21:01 17751. 首先还是主要的显示页面tree.html,这里有两个地方 ... -
ExtJS学习笔记 layout的9种样式风格总结
2011-11-15 14:06 985ExtJS学习笔记 layout的9种样式风格总结 http ... -
extjs中TreeLoader加参数
2011-09-14 14:17 5232/** * 重新加载数据 * @param pa ... -
ExtJS中表单验证使用自定义vtype(两次输入密码重复)示例
2011-02-24 11:28 5217在ExtJS中,使用了四种自定义,分别是'alpha',alp ... -
EXT组件xtype简介
2011-01-04 11:56 1067http://wxg6203.iteye.com/blog/6 ... -
Ext之级联Combox
2010-11-21 01:43 1381/** * 定义store,在baseParams中定义参 ... -
图文详解Ext常见开发工具的安装使用
2010-10-11 21:23 1084图文详解Ext常见开发工具的安装使用 http://www. ...
相关推荐
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320...
extjs-basex.js extjs-basex.js extjs-basex.js
FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
1. **扁平化设计**:Slate 主题摒弃了传统的渐变和浮雕效果,采用简洁的色彩和线条,使界面看起来更加清爽、简洁。 2. **高可读性**:主题注重文字和背景的对比度,确保了良好的可读性,特别是在不同的屏幕尺寸和...
深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
最新的ExtJS4.1-RC1,使用ExtJS的可以看看
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
extjs4.2-2
1. **安装与引入**:讲解如何将ExtJS库引入到项目中,包括下载、引入JS文件以及设置HTML头部引用。 2. **基础组件**:介绍如窗口(Window)、面板(Panel)、按钮(Button)、菜单(Menu)等基础组件的用法,包括...
这个名为"ExtJS--Windows.rar"的压缩包显然是关于如何使用ExtJS来模仿Windows桌面应用的示例或教程。让我们深入探讨一下ExtJS以及如何利用它来实现这样的效果。 1. **ExtJS框架**:ExtJS是由Sencha公司开发的一个...
ExtJS4.0-API Ext4.0-API Ext4 ExtJS4 API 学EXTJS4的好东西...
在"ExtJS----HelloWorld程序源码"中,我们将会看到如何使用ExtJS来创建一个简单的“你好,世界!”应用。以下是对这个示例中涉及的主要知识点的详细解释: 1. **引入ExtJS库**:首先,你需要在HTML文件中引入ExtJS...
这篇博客文章"Extjs--DWR做的动态树"可能探讨了如何利用这两者结合来创建动态的树形数据结构,这种结构在很多Web应用中用于展示层次化的信息,比如文件系统、组织结构或导航菜单。 动态树在Web应用中是交互式的,...
1. "Ext3.2中文API.CHM" 提供了EXTJS 3.2版本的中文API参考,详细介绍了3.2版中的所有组件、配置项、方法和事件。开发者可以通过这个文档了解如何使用EXTJS 3.2的各个组件,例如Grid、Form、TreePanel等,以及如何...
【Extjs--OA 自动办公系统】是一款基于ASP.NET技术和EXTJS前端框架开发的办公自动化系统,采用典型的三层架构设计,旨在提供高效、便捷的办公流程管理。此系统的实现涉及了多个关键知识点,下面将详细阐述这些技术...
Extjs6.2 生成的admin-dashboard官方模板
1. **MVC架构**:MVC(Model-View-Controller)是一种软件设计模式,将业务逻辑、用户界面和数据处理分离开来。在ExtJS中,Model负责数据的存储和验证,View负责显示用户界面,Controller作为两者之间的桥梁,处理...