ExtJs2.0学习系列(5)--Ext.FormPanel之第二式

表单时是web中常见的元素，Ext中的表单也是特别丰富的，接下来我们一块看看表单的相关内容。

还是先看一下代码和效果：Ext.onReady(function(){var fp=new Ext.form.FormPanel({ //注意：Ext.form.FormPanel=Ext.FormPaneltitle:'用户登录',width:300,//height:250,bodyStyle:'padding:5px 5px 0',renderTo:'divFormPanel',frame:true,//在此，这个属性就很重要了，如果不为true，你会看到下面的button和panel看起来是分开的url:'login.aspx',//提交地址method:'post',//提交方法defaults:{ //在这里同一定义item中属性，否则需要各个指明xtype:'textfield',labelAlign:'left',labelWidth:80,width:100},items:[{fieldLabel:'用户名',xtype:'textfield',//Ext基本类型，也可以用其对应的form元素代替name:'userName',id:'userName'//width:100},{fieldLabel:'密码',//xtype:'textfield',//Ext基本类型，也可以用其对应的form元素代替inputType:'password',name:'userPwd',id:'userPwd'//width:100}],buttonAlign:'center',//按钮对其方式buttons:[{text:'确定'},{text:'取消',handler:function(){//点击取消按钮的操作事件fp.hide();}}]});});FormPanel也比较好用，但是我认为我们有必要就上面xtype和inputType说几点。

序言ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。

ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。

本教程记录了前段时间本人学习ExtJS的一些心得及小结，希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。

教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。

本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。

在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。

本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客/blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。

该《指南》当前在作为VIP文档发布，供该站的VIP用户阅读及下载。

凡是购买了《ExtJS 实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。

最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。

Ext.form.FormPanel2011-04-15 李送球1、layout : String此容器所使用的布局类型。

如不指定，则使用缺省的yout.ContainerLayout类型。

当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。

针对所选择布局类型，可指定#layoutConfig进一步配置。

2、layoutConfig : Object选定好layout布局后，其相应的配置属性就在这个对象上进行设置。

（即与#layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类：yout.Absoluteyout.Accordionyout.AnchorLayoutyout.BorderLayoutyout.CardLayoutyout.ColumnLayoutyout.FitLayoutyout.FormLayoutyout.TableLayout3、bufferResize : Boolean/Number当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。

如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。

4、activeItem : String/Number组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。

例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。

只有某些风格的布局可设置activeItem（如yout.Accordion、yout.CardLayout和yout.FitLayout），以在某个时刻中显示一项内容。

相关内容请参阅yout.ContainerLayout#activeItem。

5、items : Mixed一个单独项，或子组件组成的数组，加入到此容器中。

1、引入ExtJs框架文件（存入Global.js文件中）document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"../extjs/resources/css/ext-all.css\"/> "); document.write("<script type=\"text/javascript\" src=\"../extjs/adapter/ext/ext-base.js\"></script>");document.write("<script type=\"text/javascript\" src=\"../extjs/ext-all.js\"></script>");document.write("<script type=\"text/javascript\" src=\"../extjs/ext-lang-zh_CN.js\"></script>");2、引入Global.js文件<script type="text/javascript" src="Global.js"></script><style type="text/css">.icon{background:url(icon.gif) 0 4px no-repeat !important}</style>3、效果图===================================================================================================================== 4、JS源代码<script type="text/javascript">Ext.onReady(function(){//--开始-->; //初始化提示信息实例Value Description----------- --------------------------------------------qtip当鼠标从输入栏移过时显示一个quick tiptitle 显示一个默认的浏览器弹出标题属性under在输入栏下显示一个块状div,包含出错文本side 在输入栏右侧显示一个突出的出错图标[element id] 直接在指定元素的innerHTML中加入出错文本----------------------------------------------------------"side";//======================正则表达式自定义========================"jack Val"]=/^[\u4E00-\u9FA5]+$/; //允许输入//"jack Mask"]=/^[A-Za-z]+$/; //输入指定的字符,除此之外不响应"jack Text"]="只能输汉字"; //提示信息"jack"]=function(v){ //检测函数return "jackVal"].test(v);}//======================附加正则表达式自定义========================Ext.applyIf(,{"telphone":function(_v){return/(^\d{3}\-\d{7,8}$)|(^\d{4}\-\d{7,8}$)|(^\d{3}\d{7,8}$)|(^\d{4}\d{7,8}$)|(^\d{7,8}$)/.test(_v);},"telphone Text":"请输入合法的电话号码","telphone Mask":/[0-9\-]/i,"mobile":function(_v){return/^1[1-9][0-9]\d{8}$/.test(_v);},"mobile Text":"请输入合法手机号码","mobile Mask":/[0-9]/i});//=====================定义简单数据源===============================var myStore=newfields:["txtValue","txtName"],data:[["1","喜剧"],["2","悲剧"],["3","动作"]]});//==============定义动态数据源(从服务器端获取数据)====================var dynamicStore=new/*服务器端返回信息格式:<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <%response.Clear()response.Write("{rows:[{txtValue:""1"",txtName:""喜剧"",sortOrder:0},")response.Write("{txtValue:""2"",txtName:""悲剧"",sortOrder:1},")response.Write("{txtValue:""3"",txtName:""动作"",sortOrder:2},")response.Write("{txtValue:""4"",txtName:""爱情"",sortOrder:3}]}") %>*///DataReader对象,它处理数据对象并返回,reader:newfields:["txtValue","txtName"],root:"rows"}),//如果传入此值,store将在被创建后使用autoLoad对象作为参数自动调用load方法autoLoad:true,//Proxy对象,提供访问数据对象的方法proxy:new url:"getJsonData.asp" })});//dynamicStore.load(); //使用配置的Reader从Proxy中加载Record缓存//================================================================var movie_form;if(!movie_form){movie_form=newid:"myForm", //组件唯一的id(默认值为一个自动生成的id)title:"电影信息表单", //panel头部显示的标题文字(默认值为 '')//autoWidth:true, //宽度充满整个文档的宽度width:460,//表单的宽度autoHeight:true,//表单自适应高度//height:400,//表单的高度// frame:如果为true,panel具有全部阴影(指在panel的整个body区域全部填充背景),//否则只在四周渲染一个1像素的边框(默认值为false)frame:true,iconCls:"icon", //提供一个被用作header图标的背景图片(默认值为 '')// monitorValid:如果为true,form监控自己的客户端校验状态,并使用校验状态循环触发事件.//如果需要在按钮上使用配置值formBind:true,将按钮绑定到表单的校验状态,那么该项必须为truemonitorValid:true,labelWidth:80,labelAlign:"right",//collapsible:如果为true，panel是可收缩的，并且有一个收起/展开按钮自动被渲染到它的头部工具区域，//否则panel的大小是固定的，没有按钮(默认值为 false)。

ExtJs学习笔记目录1.ExtJs 结构树 (2)2.对ExtJs的态度 (3)3.Ext.form概述 (4)4.Ext.T abPanel篇 (5)5.Function扩展篇 (7)6.Ext.data.Store篇 (10)7.Ext.data.JsonReader篇一 (13)8.Ext.data.JsonReader篇二 (16)9.Ext.data.HttpProxy篇 (20)10.Ext.data.Connection篇一 (21)11.Ext.data.Connection篇二 (25)12.Ext.Updater篇一 (27)13.Ext.Updater篇二 (28)14.JSON序列化篇 (34)15.通信篇 (36)16.extJs 2.0学习笔记(Ajax篇) (40)17.extJs 2.0学习笔记(Ext.data序论篇) (40)18.extJs 2.0学习笔记(Ext.Panel终结篇) (41)19.extJs 2.0学习笔记(事件注册总结篇) (47)20.extJs 2.0学习笔记(Ext.Panel篇一) (50)21.extJs 2.0学习笔记(Ext.Panel篇二) (53)22.extJs 2.0学习笔记(Ext.Panel篇三) (62)23.extJs 2.0学习笔记(Ext.Panel篇四) (66)24.extJs 2.0学习笔记(组件总论篇) (70)25.extJs 2.0学习笔记(Ext.Element API总结) (74)26.extJs 2.0学习笔记(Element.js篇) (78)27.extJs 2.0学习笔记(DomHelper.js篇) (81)28.extJs 2.0学习笔记(ext.js篇) (83)extjs的确是个好东西，但是，它的优点也就是它的缺点：∙加载页面慢∙时间一长，浏览器占内存就会疯长∙服务器端功能极度削弱，除了数据库操作外，几乎所有功能都到了客户端，还得用javascript来写。

extJs2.0学习笔记（ext.js篇） 要是以前，我铁定整天到处找教程看，光说不练，现在觉悟了，看教程看得最多，不一定能看完，看完了不一定能比作者更明白，看明白了不一定能用得好。

所以看教程其实好处不大，只能作为小小的参考。

很多东西看别人的始终是没有用。

只有将实验进行到底才是王道…… 这儿主要是代码分析。

研究工具：Dreamweave cs3(装那个extJs 2.0插件老装不上)、Aptana(一个好处，好看代码，有括号匹配，json语法好是好，就是括号多了，搞清在哪儿结束) 发现，extJs的代码最喜欢用json语法定义，类基本上都是用json语法定义的。

而不是在外面一大路的xx.prototype.yyyy=function(){……}。

不过这种语法蛮清晰。

我喜欢。

extJs时面只有一个类：Ext，它是一个静态类。

提供了经常要用到的函数。

Ext.apply = function(o, c, defaults){if(defaults){// no "this" reference for friendly out of scope callsExt.apply(o, defaults);}if(o && c && typeof c == 'object'){for(var p in c){o[p] = c[p];}}return o;}; 这是apply函数，作用其实相当于克隆，它把对象c中的成员全部复制到o中去。

如果有defaults，也把它的内容复制到o中。

这儿其实揭示javascript的一种语法： javascript中的对象的成员有两种引用方法： 一、o.propertyName 二、o[propertyName] 这段代码关键就在o[p]=c[p]。

这个要理解。

尽管如此，但是不能像下面一样做： var newelem=new Object(); Ext.apply(newelem,Ext.getDom("a1")); Ext.getDom("form1").appendChild(newelem); 下面一大段的代码，由于dw不好看代码，半天才晓得那儿是个(function(){……Ext.apply(Ext,{……}})()，这是我把概述出来。

ExtJs控件的定义及使用方法（二）第三种控件：单击按钮，弹出窗口，选择数据，将数据传回按钮控件，然后执行操作，例如将传回的数据添加到gridPanel中-------------------------------------------1.调用控件界面Ext.ns("ff.cd.cd");/*** 综合组设置信息明细设置* @param {} config*/ff.cd.cd.showgoods = function(config) {config = Ext.apply({prefix : "showgoods"}, config);this.init = function() {// 判断是否存在此对象，如果不存在则新建，否则直接返回var _showpanel = Ext.getCmp(this.genId("main"));if (_showpanel) {return _showpanel;}var _this = this;this.setRecord = function(record){_this.record = record;if(record){mainform.form.loadRecord(this.record);Ext.getCmp(_this.genId('rate')).setValue(record.get("rate")*10 0);Ext.getCmp(_this.genId('merchrate')).setValue(record.get("m erchrate")*100);}}/*** 这是一个回调函数,将cdgoods中的数据回调过来,方便以后做处理* @param {Object} ss*/this.fn_query=function(ss){var mm="check";alert(ss+'将数据添加到grid中');}/***调用控件,调用的方法1*/var _merchcp=showgoodsButton({id:'',fn:this.fn_query});/*** 对弹出窗体做弹出前的判断*/this.fn_msg=function(){Ext.Msg.confirm('提示', "是否打开弹出窗口",function(btn){ if(btn=='yes'){_merchcp.pop();}});}/*/*** 单击按钮执行的操作*/_merchcp.onClick = function(){_this.fn_msg();};*/this.btn_save=function(){//var _merchcp=showgoodsButton();var m=_merchcp.getValues();}panel=new ff.cd.cd.cdgoods();//商户清算合同设置var mainform = new Ext.form.FormPanel({title: "商品控件",id: this.genId("main"),closable: true,// bodyStyle: 'padding:5px',autoHeight: false,autoWidth: false,autoScroll: true,loadMask : true,frame: true,// layout:'fit',width:480,height:180,labelAlign : 'right',buttonAlign :'center',items: [{xtype:'panel',layout:'table',buttonAlign:'center',layoutConfig: {// The total column count must be specified here columns: 4},items:[{xtype:'label',text:"商品:"},{colspan:3,items:[_merchcp],},{colspan:4,items:[{xtype : 'textfield',id : this.genId("pid"), name : 'pid',hidden:true}]},{colspan:4,items:[{xtype : 'textfield',id : this.genId("id"), name : 'id',hidden:true}]},{colspan:4,items:[{xtype : 'textfield',id : this.genId("corpcode"), name : 'corpcode', hidden:true}]},{colspan:4,items:[{xtype : 'textfield',id : this.genId("corpid"), name : 'corpid', hidden:true}]}],buttons:[{//调用控件的方法2：调用封装控件searchgoodsbutton xtype:'searchgoodsbutton',id:this.genId('btn_exit'),icon:"image/exit.png",width:100,text:"商品控件1",windFn :this.fn_query,handler:this.btn_exit},{////调用控件的方法3：直接调用控件searchbuttonxtype:'searchbutton',id:this.genId('btn_exit'),//icon:"image/exit.png",windWidth : 600,windHeight : 400,text:"商品控件2",windItem : panel,windArray:panel.getArray,windFn :this.fn_query,handler:this.btn_exit}]}]});return mainform;}ff.cd.cd.showgoods.superclass.constructor.call(this, config); }Ext.extend(ff.cd.cd.showgoods, Ext.sydev.Sheet);---------------------------------------------------------------------------------------------------------------具体代码如下：代码里都有注释----------------------------------------------------showgoodsButton函数/*** 单位信息模式窗体查询** @return {}*/showgoodsButton=function(config) {/*** 这里传递的参数是用来接收调用该控件页面的配置信息的,* 所以名字不可以更改,并且页面调用的配置参数名称必须与这里保持一致* @param {Object} id* @return {TypeName}*/this.id=config.id;/*** 指定回调函数* @param {Object} id* @return {TypeName}*/this.fn=config.fn;/*** 调用指定回调函数,因为参数名与参数值不能相同(windFn : windFn 不可以),所以这样定义* @param {Object} id* @return {TypeName}*/this.windFn=config.windFn;if(this.windFn){fn=this.windFn;}if(id == undefined || id == null){id = Ext.id();}//var panel = doWindow;panel=new ff.cd.cd.cdgoods();return new Ext.custom.SearchButton({columnWidth: .7,xtype : "searchbutton",id : id,name:"corpname",width : 70,text:'商品控件',windItem : panel,windArray:panel.getArray,windWidth : 600,windHeight : 400,anchor : '90%',windFn : fn});}Ext.extend(showgoodsButton,Ext.custom.SearchButton);Ext.reg("searchgoodsbutton",showgoodsButton);------------------------------------------------------searchText.js//*** 需求:点击按钮,弹出一个窗口,选择记录,返回给前台这些数据,在弹出窗口中this.WindArray方法是必须的.* this.getGridValues是一个回调函数,用来与调用此窗口的页面进行交互* config:配置参数,接受调用此控件的对象传递过来的参数**function showgoodsButton(id,fn) {* if(id == undefined || id == null){* id = Ext.id();* }* var panel = new ff.cd.cd.cdgoods({typeAll : 'all'});* return new Ext.custom.SearchButton({* columnWidth: .7,* xtype : "searchbutton",* id : id,* name:"corpname",* width : 200,* windItem : panel,* windArray:panel.getArray,* windWidth : 600,* windHeight : 400,* anchor : '90%',* windFn : fn** });** }* 其他页面调用上面的过程,并传递一个fn方法进来,接受返回的数据*/Ext.ns("Ext.custom");Ext.custom.SearchButton = function(config){//定义按钮的显示样式this.triggerClass = 'x-form-search-trigger',this.defaultAutoCreate = {tag: "input", type: "button", size: "10", autocomplete: "off"},/***********************定义窗体的属性**************************//*** 窗体的宽* @type String*/this.windWidth = 200;/*** 窗体的高* @type String*/this.windHeight = 300;/*** 窗体的标题* @type String*/this.windTitle = null;/*** 是否把高设为自动* @type Boolean*/this.windAutoHeight = false;/*** 是否将宽设为自动* @type Boolean*/this.windAutoWidth = false;/*** 是否显示滚动条* @type Boolean*/this.windAutoScroll = true;/*** 传到window中的内容* @type Object*/this.windItem = null;/*** 从窗体上传过来的值* @type Object*/this.windArray = null;/*** 从窗体返回到文本框中的值，是否自定义格式,false:表示默认以逗号隔开,否则自定义格式并返回* @type Boolean*/this.isDefindValue = false;/**** @memberOf {TypeName}* @return {TypeName}*/this.windFn=null;/*******************定义属性**************************************//*** 只读属性*/this.readOnly = true;/*** 实际字段，也就说我们常说的隐藏值,一般由系统内部使用，或者用户输入的字段名称* @type:String*/this.valueField = null;/*** 显示字段，一般该字段值从系统里查出来并显示在控件里,用户易懂* @type String*/this.displayField = null;/*** 实际值* @type String*/this.values = null;/*** 显示值* @type String*/this.dispalyValue = null;/*** 根据valueField查出来的json数据保存在该字段里面* @type json*/this.jsonData = null;/**** @type 正则表达式*/this.regex = null;/*** 该类型为输入数据的类型，具体的参数如下：* 0-任意字符；1-数字；2-正数；3-负数；4-非0；5-字母；6-小写字母；7-大写字母；8：中文字；9：非中文字；其他。

⽆废话ExtJs⼊门教程五[⽂本框：TextField]继上⼀节内容，我们在表单⾥加了个两个⽂本框。

如下所⽰代码区的第42⾏位置，items: [txtusername, txtpassword]。

1.代码如下：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <html xmlns="/1999/xhtml">3 <head>4 <title></title>5 <!--ExtJs框架开始-->6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>7 <script type="text/javascript" src="/Ext/ext-all.js"></script>8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />9 <!--ExtJs框架结束-->10 <script type="text/javascript">11 Ext.onReady(function () {12//初始化标签中的Ext:Qtip属性。

13 Ext.QuickTips.init();14 Ext.form.Field.prototype.msgTarget = 'side';15//⽤户名input16var txtusername = new Ext.form.TextField({17 width: 140,18 allowBlank: false,19 maxLength: 20,20 name: 'username',21 fieldLabel: '⽤户名称',22 blankText: '请输⼊⽤户名',23 maxLengthText: '⽤户名不能超过20个字符'24 });25//密码input26var txtpassword = new Ext.form.TextField({27 width: 140,28 allowBlank: false,29 maxLength: 20,30 inputType: 'password',31 name: 'password',32 fieldLabel: '密码',33 blankText: '请输⼊密码',34 maxLengthText: '密码不能超过20个字符'35 });36//表单37var form = new Ext.form.FormPanel({38 frame: true,39 title: '表单标题',40 style: 'margin:10px',41 html: '<div style="padding:10px">这⾥表单内容</div>',42 items: [txtusername, txtpassword]43 });44//窗体45var win = new Ext.Window({46 title: '窗⼝',47 width: 476,48 height: 374,49 html: '<div>这⾥是窗体内容</div>',50 resizable: true,51 modal: true,52 closable: true,53 maximizable: true,54 minimizable: true,55 items: form56 });57 win.show();58 });59 </script>60 </head>61 <body>62 <!--63说明：64 (1)Ext.QuickTips.init()：QuickTips的作⽤是初始化标签中的Ext:Qtip属性，并为它赋予显⽰提⽰的动作。