Extjs学习笔记二 Extjs的形式

js中的表单组件是Ext.form.BasicForm，但最简单、最常用的是Ext.form.FormPanel控件，它继承了Panel，具有一定的界面显示控制能力。它包含一个BasicForm对象，用于执行提交到服务器和加载等操作。Extjs还封装了常用的html表单项，并提供了一些附加功能，例如数据验证。在实际使用中，只需将这些表单项添加到FormPanel中即可。常见的表单项目有文本字段、数字字段、单选按钮、复选框等。这里有一个例子来介绍基本表单的使用。由于Form的使用需要与服务器端程序进行交互，为了方便起见，新建一个ASP.NET站点，在站点下添加extjs的所有文件，然后新建一个forms.htm文件作为本次的样本文件，如下图所示：。

下面为forms.htm添加代码，主要是为FormPanel添加表单项：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title xtjs FormPanel/title link rel='样式表type=' text/CSS ' href=' ext-3。1 .0/resources/CSS/ext-all。CSSallow-float{clear:none！重要；} .stop-float{ clear:both！重要；} .左浮动{ float:left}/style脚本类型=' text/JAVAScript ' src=' http : Ext-3。1 .0/适配器/外部/外部基座。js '/script脚本类型=' text/JavaScript ' src=' http : Ext-3。1 .0/所有分机。js '/script脚本类型=' text/JavaScript ' Ext。onready(function(){ Ext .BLANK _ IMAGE _ URL=' ext-3。1 .0/资源/图像/默认/s . gif '；延伸文件系统快速提示。init()；//初始化信息提示功能var loginForm=new ext。形式。表单面板({ title : ' A Simple form panel '，height: 300，width: 300，frame: true，labelSeparator: ' : '，labelWidth: 60，labelAlign: 'right '，applyTo: 'form '，items :[new ext。形式。文本字段({ id 3:必填字段，msgTarget: 'qtip' })，新的延伸文件系统形式。textfield({ id : ' Password '，fieldLabel: 'Password '，allowBlank: false，inputType: 'password '，blankText: '必填字段，//msg targe : ' qtip ' msg targe : ' side ' })，新延伸文件系统形式。textfield({ id : ' email '，字段标签: ' email '，allowBlank: false，selectOnFocus: true，inputType: 'Text '，msgtarge : ' side '，emptyText: '必填字段/^([\w])(。regex :[\w] )*@([\w-] \ .){1，5}([A-Za-z]){2，4}$/，regexText: ' Email格式不正确}),新的延伸文件系统形式。数字字段({ id : ' Age '，fieldLabel: 'Age '，allowNegative: false，分米精度： 0,最大值： 100,最大文本： '输入的数字最大是100' }),新的Ext.form.TextArea({ id: '备注，fieldLabel: '备注宽度：200)}，新的Ext.form.Radio({ name: 'sex '，itemcl : ' float-left '，clear cls 3360 ' allow-float '，fieldLabel: ' Sex '，boxLabel: ' Male ' })，新的延伸文件系统形式。收音机({名称3: ' Sex '，清除cls 3:按钮({ text: 'OK '，处理程序：登录})]})；函数login() { loginForm.getForm().提交({ clientValidation: true，waitMsg: '请稍候.'，waitTitle: "提示“，URL :”简单FORm。ashx”，方法：“GET”，成功：函数（窗体，操作){ Ext .Msg.alert('提示'，'获得成功：你的名字是'行动。结果。味精。名称为“pwd :”操作。结果。味精。密码)；}，failure:函数（形式，动作){ Ext .消息警报('提示'，'获取失败'操作。故障类型)；} });};});/script/head body div id=' form '/div/body/html构造FormPanel的时候需要通过应用于属性指定将这个面板加载到什么区域，应用于的值一般是差异的身份证。FormPanel的项目属性就是一个表单项的数组文本字段。可以指定是否允许为空，数字字段也可以，还可以指定最大值、最小值的限制。值得注意的是这些表单项中的itemCls和clearCls属性，可以通过这些属性给表单项附加钢性铸铁以实现自己想要的效果。其中itemCls是附加在表单项本身上面的，clearCls是附加在一个紧贴着该表单项的空白差异上面的按钮。属性中可以添加按钮对象。暂时忽略提交函数，到现在为止，一个表单已经完成

这个表单外观比较一致，也有常用的验证功能。extjs的更多表单验证功能将在后面介绍。表格的提交说明如下。表单提交依赖于Basicform的提交方法。您可以通过调用FormPanel的getForm方法来获取基本表单，然后调用它的submit方法。提交方法中的主要参数是要提交的url地址、提交GET/POST的方法，以及提交失败和成功后的失败和失败两种处理功能。两个处理函数有两个参数，一个是当前表单，一个是Action对象，主要记录本次提交(或加载)的主要信息，包括failureType和服务器返回的信息结果。failureType可以是Action.client _ invalid、conntect _ faliure、load _ false、server _ invalid，它们是在Action中定义的公共属性，实际上是一个字符串。下面主要介绍服务器返回的结果。extjs对服务器返回的信息有严格的要求。默认情况下，服务器应该返回一个json字符串，它的一个属性是success，它是布尔值，表示提交成功。其他属性可以是其他用户定义的返回数据。例如，以下是服务器返回的示例：复制代码如下： {'success' : true，//注意这是布尔值，不是字符串' msg' : '更新成功！'}为此htm页面编写一个服务器响应页面，并创建一个新的Generic Handler页面SimpleForm.ashx这个响应非常简单，就是将提交的名称和密码返回给客户端。要返回的数据应该类似于：{success:true，msg3360 { name3360xxx，password3360xxxx } }。响应应写如下：复制的代码如下： public void process request(httpcontextcontext){ strings=context . request . params[' name ']；字符串pwd=上下文。请求参数['密码']；if(s==null)s=' null '；字符串结果='{success:true，msg: { Name: \ '，password : \ ' \ ' \ ' } ' } '；语境。响应。内容类型='文本/纯文本'；语境。回应.写(结果)；}运行程序，填写必要的信息，点击OK按钮，即可看到服务器返回的数据：。

最后，介绍了如何从服务器获取表单信息并填写客户端表单。为了填充客户端，使用了BasicForm的加载方法。默认情况下，此方法需要来自服务器的json字符串。与提交类似，也需要一个成功属性，剩下的就是表单字段信息。只要属性的名称与表单项的名称相同，这个填写过程就会自动完成，非常方便。为此表单添加一个加载按钮，以从服务器获取表单信息：复制代码如下： buttons 3360[new ext . button({ text : ' ok '，handler:login})、newext.button ({text3360' load '，handler : load data })]load data的方法是：function load data(){ loginform . getform()。load({ client validation : false，waitmsg:' loading . '，URL 3360“simpleformload . ashx”，method :“get”}。}请注意，clientValidation设置为false，因为加载数据不需要客户端验证。simpleFormLoad.ashx对应的服务器代码为：public void process request(httpcontext context){ context . response . content type=' text/plain '；语境。响应。写入(' {success:true，data : { name : ' server reply \ '，age:10，email : \ '[email protected]\ ' } ')；}点击加载按钮，您将看到：。

数据从服务器顺利返回并自动填充到表单中。本文主要介绍extjs表单的基本概念以及如何与服务器进行交互。这些内容不足以满足实际需要。下面的文章会介绍一些比较实用的内容。