ExtJs入门实例.doc

ExtJs2.0学习系列(1)-Ext.MessageBox发布时间：2008-8-7 大家都知道，刚开始搞extjs的时候，很是有点困难，所以本人在新手刚入门后准备了这个系列的文章。个人认为用extjs做后台很不错，布局比较完美！1.Ext.MessageBox.alert()方法 有四个参数，为简单起见，主要介绍前面三个参数：alert( title , msg , function() )其中title，msg为必选参数，function为可选参数，在关闭弹出窗口后触发。Ext.MessageBox.alert(title,msg); Ext.MessageBox.alert(title,msg,function()alert(关闭对话框后弹出！);2.Ext.MessageBox.confirm()方法 基本上同alert()方法一模一样。 注意这点： Ext.MessageBox.confirm(title,msg,function(e)alert(e););这个参数e是什么？它是你点击的弹出框的按钮的值，三种值：yes,no,cancel.Alert()方法也是如此，不过只有两种值：ok，cancel.3.Ext.MessageBmpt()方法 有六个参数，比前面alert方法多一个返回值和是否多行。 Ext.MessageBmpt(title,msg);Ext.MessageBmpt(title,msg,function(e,text)alert(e+-+text););/输入qianxudetianxia,点击ok按钮，弹出ok-qianxudetianxiaExt.MessageBmpt(title,msg,function(e,text)alert(e+-+text);,this,true);/true为多行，this表示作用域4.Ext.MessageBox.show()方法 功能很强大，采用config配置形式，比前面的方法使用更方便。 参数很多，在此列举最常用的配置参数：1.animEl:对话框弹出和关闭时的动画效果，比如设置为“id1”，则从id1处弹出并产生动画，收缩则相反2.buttons:弹出框按钮的设置，主要有以下几种：Ext.Msg.OK,Ext.Msg.OKCANCEL,Ext.Msg.CAMCEL,Ext.Msg.YESNO,Ext.Msg.YESNOCANCEL你也可以自定义按钮上面的字：ok,我本来是ok的。若设为false，则不显示任何按钮.3.closable:如果为false，则不显示右上角的小叉叉，默认为true。4.msg:消息的内容5.title:标题6.fn:关闭弹出框后执行的函数7.icon：弹出框内容前面的图标，取值为Ext.MessageBox.INFO，Ext.MessageBox.ERROR,Ext.MessageBox.WARNING,Ext.MessageBox.QUESTION8.width:弹出框的宽度，不带单位9.prompt：设为true，则弹出框带有输入框10.multiline：设为true，则弹出框带有多行输入框11.progress:设为true，显示进度条，（但是是死的）12.progressText:显示在进度条上的字13.wait：设为true，动态显示progress14.waitConfig:配置参数，以控制显示progressexample:Ext.MessageBox.show(title:标题,msg:内容的消息,buttons:ok:我不再显示OK了,fn:function(e)alert(e);,animEl:test1,width:500,icon:Ext.MessageBox.INFO,closable:false,progress:true,wait:true,progressText:进度条/prompt:true/multiline:true);4.Ext.MessageBox.show()中的进度条的使用首先必须知道例外两个方法Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,ProgressText,msg)(三个参数，看名字就知道意思)， 注意value为0-1之间的数，表示进度条的进度. 第一种：（通过进度的大小控制进度，满进度为1） Ext.get(btn1).on(click,function()Ext.MessageBox.show(title:df,msg:dfd,progress:true,width:300,closable:true);varf=function(v)returnfunction()if(v=12)Ext.MessageBox.hide();/alert(加载完成！);elsevari=v/11;Ext.MessageBox.updateProgress(i,Math.round(100*i)+%completed,i);for(vari=1;i13;i+)setTimeout(f(i),i*500);/从点击时就开始计时，所以500*i表示每500ms就执行一次); 第二种：（通过固定时间控制进度加载）Ext.get(btn1).on(click,function()Ext.MessageBox.show(title:时间进度条,msg:5s后关闭进度框,progress:true,width:300,wait:true,waitConfig:interval:600,/0.6s进度条自动加载一定长度closable:true);setTimeout(function()Ext.MessageBox.hide(),5000);/5后执行关闭窗口函数最后关于那个waitConfig的参数，在此说明下：1.interval:进度的频率2.duration：执行进度的持续时间，超过这个时间后，interval失效，不再产生进度效果，但进度狂也不会消失。3.fn:duration的时间到后执行的函数所以，上面的通过时间控制进度另外一种写法为:Ext.get(btn1).on(click,function()Ext.MessageBox.show(title:时间进度条,msg:5s后关闭进度框,progress:true,width:300,wait:true,waitConfig:interval:600,duration:5000,fn:function()Ext.MessageBox.hide();/让进度条消失,closable:true);/setTimeout(function()Ext.MessageBox.hide(),5000););效果一样。MessageBox类暂且就说这么多！一起期待下一章. ExtJs2.0学习系列(2)-Ext.Panel发布时间：2008-8-7上一篇文章ExtJs2.0学习系列(1)-Ext.MessageBox ，受到了大家的褒贬不一，还是有的朋友提出好的建议，在此表示感谢！今天介绍extjs中的Panel组件。/html代码/js代码varp=newExt.Panel(title:MyPanel,/标题collapsible:true,/右上角上的那个收缩按钮，设为false则不显示renderTo:container,/这个panel显示在html中id为container的层中width:400,height:200,html:我是内容，我包含的html可以被执行！/panel主体中的内容，可以执行html代码);因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件，所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。/配置参数(只列举部分常用参数)1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false3.autoShow:设为true显示设为x-hidden的元素，很有必要，默认为false4.bbar:底部条，显示在主体内，/代码：bbar:text:底部工具栏bottomToolbar,5.tbar:顶部条，显示在主体内，/代码:tbar:text:顶部工具栏topToolbar,6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）/代码：buttons:text:按钮位于footer7.buttonAlign:footer中按钮的位置，枚举值为：left,right,center,默认为right8.collapsible：设为true，显示右上角的收缩按钮，默认为false9.draggable:true则可拖动，但需要你提供操作过程，默认为false10.html:主体的内容11.id：id值，通过id可以找到这个组件，建议一般加上这个id值12.width：宽度13.height：高度13.title:标题14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.15.applyTo：（id）呈现在哪个html元素里面16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现17.renderTo：（id）呈现在哪个html元素里面/关于这三个参数的区别(个人认为：applyTo和RenderTo强调to到html元素中，contentEl则是html元素到ext组件中去)：英文如下（本人英语poor，不敢乱翻译）：contentEl-Thisconfigoptionisusedtotakeexistingcontentandplaceitinthebodyofanewpanel.Itisnotgoingtobetheactualpanelitself.(ItwillactuallycopytheinnerHTMLoftheelanduseitforthebody).Youshouldaddeitherthex-hiddenorthex-hide-displayCSSclasstopreventabriefflickerofthecontentbeforeitisrenderedtothepanel.applyTo-Thisconfigoptionallowsyoutousepre-definedmarkuptocreateanentirePanel.Byentire,Imeanyoucanincludetheheader,tbar,body,footer,etc.Theseelementsmustbeinthecorrectorder/hierarchy.Anycomponentswhicharenotfoundandneedtobecreatedwillbeautogenerated.renderTo-ThisconfigoptionallowsyoutorenderaPanelasitscreated.ThiswouldbethesameassayingmyPanel.render(ELEMENT_TO_RENDER_TO);哪位大人帮忙翻译下.考虑到入门，方法事件会在以后的文章中以实例穿插。1.可拖动的panel实例下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件./html代码.无./下面创建一个允许拖动的panel，但是拖动的结果不能保存varp=newExt.Panel(title:Dragme,x:100,y:100,renderTo:Ext.getBody(),/x,y,renderTo:Ext.getBody()初始化panel的位置floating:true,/trueframe:true,/圆角边框width:400,height:200,draggable:true).show();/在这里也可以不show（）但是还不能拖到其他的地方，我们需要改写draggable：draggable:insertProxy:false,/拖动时不虚线显示原始位置onDrag:function(e)varpel=xy.getEl();this.x=pel.getLeft(true);this.y=pel.getTop(true);/获取拖动时panel的坐标,endDrag:function(e)this.panel.setPosition(this.x,this.y);/移动到最终位置实现了可保存的拖动，如图：拖动的时候阴影还在原位置，我们再在draggable中的onDrag事件中添加代码：vars=this.panel.getEl().shadow;if(s)s.realign(this.x,this.y,pel.getWidth(),pel.getHeight();/shadow的realign方法的四个参数，改变shadow的位置大小属性最后这个可拖动的panel的代码为：varp=newExt.Panel(title:Dragme,x:100,y:100,renderTo:Ext.getBody(),floating:true,frame:true,width:400,height:200,draggable:insertProxy:false,onDrag:function(e)varpel=xy.getEl();this.x=pel.getLeft(true);this.y=pel.getTop(true);vars=this.panel.getEl().shadow;if(s)s.realign(this.x,this.y,pel.getWidth(),pel.getHeight();,endDrag:function(e)this.panel.setPosition(this.x,this.y);)/效果图片我就不贴出来了2.带顶部，底部，脚部工具栏的panelvarp=newExt.Panel(id:panel1,title:标题,collapsible:true,renderTo:container,closable:true,width:400,height:300,tbar:text:按钮1,text:按钮2,/顶部工具栏bbar:text:按钮1,text:按钮2,/底部工具栏html:内容,buttons:text:按钮1,text:按钮2/footer部工具栏);我们已经在各种工具栏上添加了按钮，但是却没有激发事件，下面我们来添加按钮事件代码：tbar:text:按钮1,handler:function()Ext.MessageBox.alert(我是按钮1,我是通过按钮1激发出来的弹出框！),text:按钮2,/改写tbar，添加handler句柄，点击顶部工具栏上按钮1，弹出提示框，效果图大家想象下，就不贴出来了当然，一般情况下，我们只要一个工具栏，这里只是为了演示！3.panel工具栏/添加下面的代码到panel配置参数中tools:id:save,id:help,id:up,id:close,handler:function()Ext.MessageBox.alert(工具栏按钮,工具栏上的关闭按钮时间被激发了),/id控制按钮，handler控制相应的事件/id的枚举值为：toggle(collapsable为true时的默认值)closeminimizemaximizerestoregearpinunpinrightleftupdownrefreshminusplushelpsearchsaveprint关于panel今天就讨论到这里，欢迎批评！一起期待下一片文章. ExtJs2.0学习系列(3)-Ext.Window发布时间：2008-8-7 上一篇文章： ExtJs2.0学习系列(2)-Ext.Panel 下一篇文章： ExtJs2.0学习系列(4)-Ext.FormPanel之第一式前面介绍了panel组件-ExtJs2.0学习系列(2)-Ext.Panel，今天将介绍window组件，它继承自panel。先介绍个最简单例子/html代码/js代码varw=newExt.Window(contentEl:win,/主体显示的html元素，也可以写为el:winwidth:300,height:200,title:标题);w.show();参数介绍：因为前面已经介绍了panel组件，下面只介绍window组件的几个其他特别的配置参数/几个前面没有介绍的window自己的配置参数1.closeAction:枚举值为：close(默认值)，当点击关闭后，关闭window窗口hide,关闭后，只是hidden窗口2.closable:true在右上角显示小叉叉的关闭按钮，默认为true3.constrain：true则强制此window控制在viewport，默认为false4.modal:true为模式窗口，后面的内容都不能操作，默认为false5.plain：/true则主体背景透明，false则主体有小差别的背景色，默认为false/需要显示下show（）方法,默认的窗口是可拖动的，可关闭的，可拖动大小的w.show（）实例介绍：1.嵌套了tabpanel的windowvarw=newExt.Window(contentEl:win,width:300,height:200,items:newExt.TabPanel(activeTab:0,/当前标签为第1个tab（从0开始索引）border:false,items:title:tab1,html:tab1在windows窗口中,title:tab2,html:tab2在windows窗口中/TabPanel中的标签页，以后再深入讨论),plain:true,/true则主体背景透明，false则主体有小差别的背景色，默认为falsetitle:标题);w.show();我们通过items把TabPanel组件嵌套在window的主体中去了。我们在添加工具栏看看/bbar:text:确定,text:取消,handler:function()w.close();,/bottom部buttons:text:确定,text:取消,handler:function()w.close();,/footer部buttonAlign:center,/footer部按钮排列位置,这里是中间/collapsible:true,/右上角的收缩按钮其他工具栏方法一样。关于window中嵌套复杂的布局，等我们谈完了extjs布局再举例说明。今天的内容比较少，请高手pp，让我们期待下篇文章！ ExtJs2.0学习系列(4)-Ext.FormPanel之第一式发布时间：2008-8-7 上一篇文章： ExtJs2.0学习系列(3)-Ext.Window 下一篇文章： ExtJs2.0学习系列(5)-Ext.FormPanel之第二式上篇中我们讨论了Ext.window的简单使用，今天我们要看看强大的FormPanel,也是继承panel组件的使用。首先弄清楚这个问题，创建的时候： /查看源代码便知，两种方法是一样的Ext.form.FormPanel=Ext.FormPanel;我们还是从最简单的代码实例开始吧：/js代码varform1=newExt.form.FormPanel(width:350,frame:true,/圆角和浅蓝色背景renderTo:form1,/呈现title:FormPanel,bodyStyle:padding:5px5px0,items:fieldLabel:UserName,/文本框标题xtype:textfield,/表单文本框name:user,id:user,width:200,fieldLabel:PassWord,xtype:textfield,name:pass,id:pass,width:200,buttons:text:确定,text:取消,handler:function()alert(事件！););都是通过items属性参数把表单元素添加到这个表单中。我们发现两个文本框的类型和狂度是一样的，我们还可以把items里面的相同项提取出来，以简化代码：/简化代码，和上面的代码效果一样varform1=newExt.form.FormPanel(width:350,frame:true,renderTo:form1,title:FormPanel,bodyStyle:padding:5px5px0,defaults:width:200,xtype:textfield,/*简化*/items:fieldLabel:UserName,/xtype:textfield,name:user,id:user,/width:200,fieldLabel:PassWord,/xtype:textfield,name:pass,id:pass,inputType:password,/width:200,buttons:text:确定,text:取消,handler:function()alert(););关于inputType,参数如下：/input的各种类型（这个大家都知道，就只列了几个典型的）radiochecktext(默认)filepassword等等关于FormPanel的配置参数，请主要参考panel的参数，这里列举另外两个：1.labelAlign:fieldlabel的排列位置，默认为left，其他两个枚举值是center,right2.labelWidth:fieldlabel的占位宽3.method:get或post4.url：提交的地址5.submit:提交函数/稍后我们一起详细分析因为内容太多，我们先看一个例子。1.FormPanel的fieldset应用/把前面代码重写items属性items:xtype:fieldset,title:个人信息,collapsible:true,autoHeight:true,width:330,defaults:width:150,defaultType:textfield,items:fieldLabel:爱好,name:hobby,value:,xtype:combo,name:sex,store:男,女,保密,/数据源为一数组fieldLabel:性别,emptyText:请选择性别.这里的combox组件只是简单的演示，具体还是要深入了解，我们会在以后的内容中详细探讨。2.关于xtype的类型，在extjs的form表单（其他的请参考api）中已经定义的有：Formcomponents-formExt.FormPanelcheckboxExt.form.CheckboxcomboExt.form.ComboBoxdatefieldExt.form.DateFieldfieldExt.form.FieldfieldsetExt.form.FieldSethiddenExt.form.HiddenhtmleditorExt.form.HtmlEditorlabelExt.form.LabelnumberfieldExt.form.NumberFieldradioExt.form.RadiotextareaExt.form.TextAreatextfieldExt.form.TextFieldtimefieldExt.form.TimeFieldtriggerExt.form.TriggerField不早了，FormPanel还有很多的东西要了解，但是今天不能再讲了，太多了，大家都没有兴致看下去,明天继续。extjs的东西很庞大，但是还没有一个人用中文系统的分析写文章，所以资料都很可贵，现在我想做这件事，请大家多多支持，我才有动力，才有激情，才能写出更好的下一片文章，让我们期待更精彩的next吧! ExtJs2.0学习系列(5)-Ext.FormPanel之第二式发布时间：2008-8-7 上一篇文章： ExtJs2.0学习系列(4)-Ext.FormPanel之第一式 下一篇文章： ExtJs2.0学习系列(6)-Ext.FormPanel之第三式(ComboBox篇)上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox,今天我们继续把这个话题说下去，说全一点，说深一点。3.可选的fieldset实例 其实就是带个chechbox，有点像论坛注册时有一部分是选填信息的那种效果，主要知识点：/因为觉得这个参数特别，特举一例以说明1.checkboxToggle:true/true则呈现一个带checkbox的fieldset，选中则展开，否则相反，默认为false2.checkboxName:string/当上面为true时，作为checkbox的name，方便表单操作这里我把js核心代码贴出来(html代码与上一篇中完全相同，不列出)：/在上一节的基础代码的items里面添加如下配置xtype:fieldset,checkboxToggle:true,/关键参数，其他和以前的一样checkboxName:dfdf,title:选填信息,defaultType:textfield,width:330,autoHeight:true,/使自适应展开排版items:fieldLabel:UserName,name:user,anchor:95%/330px-labelWidth剩下的宽度的95%，留下5%作为后面提到的验证错误提示,fieldLabel:PassWord,inputType:password,/密码文本name:pass,anchor:95%4.表单验证实例（空验证，密码确认验证，email验证）我们可以用单独的js写表单验证，但是extjs已经为我们想到了（自己单独写反而不方便）。在验证之前，我不得不提两个小知识点：/大家在很多的extjs代码中都看到了这两个，他们都起提示作用的Ext.QuickTips.init();/支持tips提示Ext.form.Ftotype.msgTarget=side;/提示的方式，枚举值为qtip,title,under,side,id(元素id)/side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示，其他的我就不介绍了，可自行验证/大家可以分别去掉这两行代码，看效果就会明白他们的作用，（放在onReady的function（）中）1.我们看一个最简单的例子：空验证（其实这不算是一个专门的验证例子） /空验证的两个参数1.allowBlank:false/false则不能为空，默认为true2.blankText:string/当为空时的错误提示信息js代码为：varform1=newExt.form.FormPanel(width:350,frame:true,renderTo:form1,labelWidth:80,title:FormPanel,bodyStyle:padding:5px5px0,defaults:width:150,xtype:textfield,inputType:password,items:fieldLabel:不能为空,allowBlank:false,/不允许为空blankText:不能为空，请填写,/错误提示信息，默认为Thisfieldisrequired!id:blanktest,anchor:90%);2.用vtype格式进行简单的验证。在此举邮件验证的例子，重写上面代码的items配置:items:fieldLabel:不能为空,vtype:email,/email格式验证vtypeText:不是有效的邮箱地址,/错误提示信息,默认值我就不说了id:blanktest,anchor:90%你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证：/form验证中vtype的默认支持类型1.alpha/只能输入字母，无法输入其他（如数字，特殊符号等）2.alphanum/只能输入字母和数字，无法输入其他3.email/email验证，要求的格式是4.url/url格式验证，要求的格式是3.确认密码验证（高级自定义验证）前面的验证都是extjs已经提供的验证，我们也可以自定义验证函数，比上面要复杂点了。我们一起做一个密码确认的例子。我们修改前面的代码：/先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）Ext.apply(Ext.form.VTypes,password:function(val,field)/val指这里的文本框值，field指这个文本框组件，大