`
zpball
  • 浏览: 914552 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS专题-FormPanel(1)

阅读更多
OK,前面我们已经学过了GridPanel,TabPanel,TreePanel这三种重要的面板,今天我们再下一城,拿下FormPanel这个面板。提到表单Form,那是做WEB开发的无人不晓了。那么,在ExtJS中,对应表单Form的封装组件就是FormPanel,它的重要性就不言而喻了。为了详细说明FormPanel中的各项属性和各种字段类型,我找了一个综合点的例子,这个例子来源于网络,被人转了多次也不知道原作者是谁了,在这里我要向原作者致敬,因为这个例子写的很用心。唯一有点缺陷就是在IE6.0和FireFox2.0上测试布局效果都有点小问题,所以我这里把它改造了一下。在主流浏览器上测试通过,并且加入了大量的注释,确保大家有点ExtJS基础的能够一看就懂。注明一点就是,我使用的ExtJS版本是2.02!

       好啦。入正题。看页面效果先:



我们先来看看前台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,这样你就彻底地征服它了。
  • 大小: 63.2 KB
分享到:
评论

相关推荐

    ExtJS笔记----FormPanel的使用

    NULL 博文链接:https://lucky16.iteye.com/blog/1490278

    深入浅出EXTJS320-395

    深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320...

    extjs extjs-basex.js

    extjs-basex.js extjs-basex.js extjs-basex.js

    extjs中的formPanel以及表单的应用

    FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    extjs4-slate 主题

    1. **扁平化设计**:Slate 主题摒弃了传统的渐变和浮雕效果,采用简洁的色彩和线条,使界面看起来更加清爽、简洁。 2. **高可读性**:主题注重文字和背景的对比度,确保了良好的可读性,特别是在不同的屏幕尺寸和...

    深入浅出EXTJS241-320

    深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320

    extJs-5.0.1-gpl(part1)

    extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分

    ExtJS4.1-RC1

    最新的ExtJS4.1-RC1,使用ExtJS的可以看看

    extjs-620-docs.zip

    extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档

    extjs4.2-2

    extjs4.2-2

    extjs2----关于extjs 的使用,操作

    1. **安装与引入**:讲解如何将ExtJS库引入到项目中,包括下载、引入JS文件以及设置HTML头部引用。 2. **基础组件**:介绍如窗口(Window)、面板(Panel)、按钮(Button)、菜单(Menu)等基础组件的用法,包括...

    ExtJS--Windows.rar_extjs_extjs CSharp_extjs windows

    这个名为"ExtJS--Windows.rar"的压缩包显然是关于如何使用ExtJS来模仿Windows桌面应用的示例或教程。让我们深入探讨一下ExtJS以及如何利用它来实现这样的效果。 1. **ExtJS框架**:ExtJS是由Sencha公司开发的一个...

    ExtJS4.0-API.rar

    ExtJS4.0-API Ext4.0-API Ext4 ExtJS4 API 学EXTJS4的好东西...

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中,我们将会看到如何使用ExtJS来创建一个简单的“你好,世界!”应用。以下是对这个示例中涉及的主要知识点的详细解释: 1. **引入ExtJS库**:首先,你需要在HTML文件中引入ExtJS...

    EXTJS3.2-3.3中文API和包

    1. "Ext3.2中文API.CHM" 提供了EXTJS 3.2版本的中文API参考,详细介绍了3.2版中的所有组件、配置项、方法和事件。开发者可以通过这个文档了解如何使用EXTJS 3.2的各个组件,例如Grid、Form、TreePanel等,以及如何...

    Extjs--OA 自动办公系统

    【Extjs--OA 自动办公系统】是一款基于ASP.NET技术和EXTJS前端框架开发的办公自动化系统,采用典型的三层架构设计,旨在提供高效、便捷的办公流程管理。此系统的实现涉及了多个关键知识点,下面将详细阐述这些技术...

    Extjs6.2 生成的admin-dashboard官方模板

    Extjs6.2 生成的admin-dashboard官方模板

    extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip

    1. **MVC架构**:MVC(Model-View-Controller)是一种软件设计模式,将业务逻辑、用户界面和数据处理分离开来。在ExtJS中,Model负责数据的存储和验证,View负责显示用户界面,Controller作为两者之间的桥梁,处理...

    Extjs4---combobox省市区三级联动+struts2

    在IT行业中,ExtJS是一个流行的JavaScript库,用于构建富客户端应用程序。版本4是其一个重要的迭代,提供了许多改进和新特性。在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中,我们将探讨如何利用...

Global site tag (gtag.js) - Google Analytics