ExtJs入门详细介绍版

ExtJs2.0学习系列-Ext.MessageBox详细版大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个系列的文章.个人认为用extjs做后台很不错,布局比较完美!1. Ext.MessageBox.alert有四个参数,为简单起见,主要介绍前面三个参数:alert title , msg , function ;其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发.Ext.MessageBox.alerttitle,msg,functionalert;注意Ext.MessageBox.alerttitle,msg,functionalert;参数e: 两种值 .2. Ext.MessageBox.confirm基本上同alert方法一模一样.注意Ext.MessageBox.confirmtitle,msg,functionalert;参数e:三种值.3. Ext.MessageBox.prompt有六个参数,比前面alert方法多一个返回值和是否多行. Ext.MessageBox.prompt;Ext.MessageBox.prompttitle,msg,function alert;,this,true;注意e是按钮返回值,text是文本框中的输入内容,true为多行,this表示作用域4. Ext.MessageBox.show功能很强大,采用config配置形式,比前面的方法使用更方便.参数很多,在此列举最常用的配置参数:a) animEl:对话框弹出和关闭时的动画效果,比如设置为id1,则从id1处弹出并产生动画,收缩则相反;b) buttons:弹出框按钮的设置,可以自定义按钮上面的字:ok,我本来是ok的,若设为false,则不显示任何按钮,默认为false.c) closable:如果为false,则不显示右上角的小叉叉,默认为true;d) msg:消息的内容;e) title:标题;f) fn:关闭弹出框后执行的函数;g) icon:弹出框内容前面的图标,h) width:弹出框的宽度,不带单位;i) prompt:设为true,则弹出框带有输入框,默认为false;j) multiline:设为true,则弹出框带有多行输入框k) progress:设为true,显示进度条,l) progressText:显示在进度条上的字m) wait:设为true,动态显示progressn) waitConfig:配置参数,以控制显示progressExt.MessageBox.showtitle:标题,msg:内容的消息,buttons:ok:我不再显示OK了,fn:functionalert;,animEl:test1,width:500,icon:Ext.MessageBox.INFO,closable:false,progress:true,wait:true,progressText:进度条/prompt:true/multiline:true;5. Ext.MessageBox.show中的进度条的使用首先必须知道另外两个方法Ext.MessageBox.hide和Ext.MessageBox.updateProgress,注意value为0-1之间的数,表示进度条的进度.第一种: Ext.get.onclick,functionExt.MessageBox.show;var f=functionreturn functionif Ext.MessageBox.hide;Elsevar i=v/11; Ext.MessageBox.updateProgressi,Math.round+% completed,i;forvar i=1;isetTimeoutf,i*500;/从点击时就开始计时,所以500*i表示每500ms就执行一次;第二种:Ext.get.onclick,functionExt.MessageBox.show;setTimeoutfunctionExt.MessageBox.hide,5000;/5后执行关闭窗口函数最后关于那个waitConfig的参数,在此说明下:a) interval:进度的频率b) duration:执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度狂也不会消失.c) fn:duration的时间到后执行的函数所以,上面的通过时间控制进度另外一种写法为:Ext.get.onclick,functionExt.MessageBox.showtitle:时间进度条,msg:5s后关闭进度框,progress:true,width:300,wait:true,waitConfig:interval:600,duration:5000,fn:functionExt.MessageBox.hide;/让进度条消失,closable:true;/setTimeoutfunctionExt.MessageBox.hide,5000;ExtJs2.0学习系列-Ext.Panel今天介绍extjs中的Panel组件.var p = new Ext.Paneltitle: My Panel,/标题collapsible:true,/右上角上的那个收缩按钮,设为false则不显示renderTo: container,/这个panel显示在html中id为container的层中width:400,height:200,html: 我是内容,我包含的html可以被执行!/panel主体中的内容,可以执行html代码;因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件,所以非常有必要介绍Panel组件的配置参数和相关的属性、方法./配置参数a) autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据b) autoScroll:设为true 则内容溢出的时候产生滚动条,默认为falsec) autoShow:设为true显示设为x-hidden的元素,很有必要,默认为falsed) bbar:底部条,显示在主体内,/代码:bbar:text:底部工具栏bottomToolbare) tbar:顶部条,显示在主体内,/代码:tbar:text:顶部工具栏topToolbarf) buttons:按钮集合,自动添加到footer中/代码:buttons:text:按钮位于footerg) buttonAlign:footer中按钮的位置,枚举值为:left,right,center,默认为righth) collapsible:设为true,显示右上角的收缩按钮,默认为falsei) draggable:true则可拖动,但需要你提供操作过程,默认为falsej) html:主体的内容k) id:id值,通过id可以找到这个组件,建议一般加上这个id值l) width:宽度m) height:高度n) title:标题o) titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.p) applyTo:呈现在哪个html元素里面q) contentEl:呈现哪个html元素里面,把el内的内容呈现r) renderTo:呈现在哪个html元素里面/关于这三个参数的区别;关于contentEl有资料如下:ContentEl-Thisconfigoptionisusedtotakeexistingcontentandplaceitinthebodyofanewpanel.Itisnotgoingtobetheactualpanelitself.Youshouldaddeitherthex-hiddenorthex-hide-displayCSSclasstopreventabriefflickerofthecontentbeforeitisrenderedtothepanel.ApplyTo-Thisconfigoptionallowsyoutousepre-definedmarkuptocreateanentirePanel.Byentire,Imeanyoucanincludetheheader,tbar,body,footer,etc.Theseelementsmustbeinthecorrectorder/hierarchy.Anycomponentswhicharenotfoundandneedtobecreatedwillbeautogenerated.RenderTo-ThisconfigoptionallowsyoutorenderaPanelasitscreated.ThiswouldbethesameassayingmyPanel.render;考虑到入门,方法事件会在以后的文章中以实例穿插.1. 可拖动的panel实例下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件./下面创建一个允许拖动的panel,但是拖动的结果不能保存var p=new Ext.Paneltitle: Drag me,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 : functionvar pel = this.proxy.getEl;this.x = pel.getLeft;this.y = pel.getTop;/获取拖动时panel的坐标,endDrag : functionthis.panel.setPosition;/移动到最终位置实现了可保存的拖动,如图:拖动的时候阴影还在原位置,我们再在draggable中的onDrag事件中添加代码:/shadow的realign方法的四个参数,改变shadow的位置大小属性var s = this.panel.getEl.shadow;if s.realignthis.x, this.y, pel.getWidth, pel.getHeight;最后这个可拖动的panel的代码为:var p=new Ext.Paneltitle: Drag me,x: 100,y: 100,renderTo: Ext.getBody,floating: true,frame: true,width: 400,height: 200,draggable: insertProxy: false,onDrag : functionvar pel = this.proxy.getEl;this.x = pel.getLeft;this.y = pel.getTop;var s = this.panel.getEl.shadow;if s.realignthis.x, this.y, pel.getWidth, pel.getHeight;,endDrag : functionthis.panel.setPosition;2. 带顶部,底部,脚部工具栏的panelvar p=new Ext.Panel;我们已经在各种工具栏上添加了按钮,但是却没有激发事件,下面我们来添加按钮事件代码:tbar:text:按钮1,handler:functionExt.MessageBox.alert,text:按钮2,改写tbar,添加handler句柄,点击顶部工具栏上按钮1,弹出提示框,效果图大家想象下,就不贴出来了当然,一般情况下,我们只要一个工具栏,这里只是为了演示!3.panel工具栏添加下面的代码到panel配置参数中:tools:id:save,id:help,id:up,id:close,handler:functionExt.MessageBox.alert,/id控制按钮,handler控制相应的事件id的枚举值为:togglecloseminimizemaximizerestoregearpinunpinrightleftupdownrefreshminusplushelpsearchsaveprintExtJs2.0学习系列-Ext.Window介绍window组件,它继承自panel.先介绍个最简单例子/js代码var w=new Ext.Window;w.show;参数介绍:因为前面已经介绍了panel组件,下面只介绍window组件的几个其他特别的配置参数/几个前面没有介绍的window自己的配置参数a) closeAction:枚举值为:close,当点击关闭后,关闭window窗口,关闭后,只是hidden窗口b) closable:true在右上角显示小叉叉的关闭按钮,默认为truec) constrain:true则强制此window控制在viewport,默认为falsed) modal:true为模式窗口,后面的内容都不能操作,默认为falsee) plain:/true则主体背景透明,false则主体有小差别的背景色,默认为falsew.show/需要显示下show方法,默认的窗口是可拖动的,可关闭的,可拖动大小的实例介绍:1. 嵌套了tabpanel的windowvar w=new Ext.WindowcontentEl:win,width:300,height:200,items:new Ext.TabPanelactiveTab:0,/当前标签为第1个tabborder:false,items:title:tab1,html:tab1在windows窗口中,title:tab2,html:tab2在windows窗口中,plain:true,/true则主体背景透明,false则主体有小差别的背景色,默认为falsetitle:标题;w.show;我们通过items把TabPanel组件嵌套在window的主体中去了.我们再添加工具栏看看bbar:text:确定,text:取消,handler:functionw.close;,/bottom部buttons:text:确定,text:取消,handler:functionw.close;,/footer部buttonAlign:center,/footer部按钮排列位置,这里是中间其他工具栏方法一样.关于window中嵌套复杂的布局,等我们谈完了extjs布局再举例说明.ExtJs2.0学习系列-Ext.FormPanel之第一式上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel组件的使用.首先弄清楚这个问题,创建的时候: Ext.form.FormPanel=Ext.FormPanel;/查看源代码便知,两种方法是一样的我们还是从最简单的代码实例开始吧:/js代码var form1 = new Ext.form.FormPanelwidth:350,frame:true,/圆角和浅蓝色背景renderTo:form1,/呈现在哪个控件里title:FormPanel,bodyStyle:padding:5px 5px 0,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:functionalert;都是通过items属性参数把表单元素添加到这个表单中.我们发现两个文本框的类型和宽度是一样的,我们还可以把items里面的相同项提取出来,以简化代码:/简化代码,和上面的代码效果一样var form1 = new Ext.form.FormPanelwidth:350,frame:true,renderTo:form1,title:FormPanel,bodyStyle:padding:5px 5px 0,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:functionalert;关于inputType参数如下:radiochecktextfilepassword等等关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:a) labelAlign:fieldlabel的排列位置,默认为left,其他两个枚举值是center,rightb) labelWidth:fieldlabel的占位宽c) method:get或postd) url:提交的地址e) 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: cnblogs ,xtype:combo,name: sex,store:男,女,#,/数据源为一数组fieldLabel:性别,emptyText:请选择性别.这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的内容中详细探讨.2. 关于xtype的类型,在extjs的form表单中已经定义的有:Formcomponentsa) formExt.FormPanel不早了,FormPanel还有很多的东西要了解,但是今天不能再讲了,太多了,大家都没有兴致看下去,明天继续.extjs的东西很庞大,但是还没有一个人用中文系统的分析写文章,所以资料都很可贵,现在我想做这件事,请大家多多支持,我才有动力.ExtJs2.0学习系列-Ext.FormPanel之第二式3. 可选的fieldset实例其实就是带个chechbox,有点像论坛注册时有一部分是选填信息的那种效果,主要知识点:l checkboxToggle:true/true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为falsel checkboxName:string/当上面为true时,作为checkbox的name,方便表单操作/在上一节的基础代码的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. 表单验证实例我们可以用单独的js写表单验证,但是extjs已经为我们想到了.在验证之前,我不得不提两个小知识点:l Ext.QuickTips.init;/支持tips提示l Ext.form.Field.prototype.msgTarget=side;/提示的方式,枚举值为qtip,title,under,side,id/side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示,其他的我就不介绍了,可自行验证大家可以分别去掉这两行代码,看效果就会明白他们的作用,放在onReady的function中 我们看一个最简单的例子:空验证/空验证的两个参数a) allowBlank:false/false则不能为空,默认为trueb) blankText:string/当为空时的错误提示信息js代码为:var form1 = new Ext.form.FormPanel; 用vtype格式进行简单的验证.在此举验证的例子,重写上面代码的items配置:items:fieldLabel:不能为空,vtype:email, /email格式验证vtypeText:不是有效的地址,/错误提示信息,默认值我就不说了id:blanktest,anchor:90%你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:l alpha/只能输入字母,无法输入其他l alphanum/只能输入字母和数字,无法输入其他l email/email验证,要求的格式是l url/url格式验证,要求的格式是 确认密码验证前面的验证都是extjs已经提供的验证,我们也可以自定义验证函数,比上面要复杂点了.我们一起做一个密码确认的例子.我们修改前面的代码:/先用Ext.apply方法添加自定义的password验证函数Ext.applyExt.form.VTypes,password:function/val指这里的文本框值,field指这个文本框组件,大家要明白这个意思if/confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值var pwd=Ext.get;/取得confirmTo的那个id的值return val=pwd.getValue;return true;/配置items参数items:fieldLabel:密码,id:pass1,anchor:90%,fieldLabel:确认密码,id:pass2,vtype:password,/自定义的验证类型vtypeText:两次密码不一致!,confirmTo:pass1,/要比较的另外一个的组件的idanchor:90%关于vtype的内容还有很多内容要挖掘,但现在我们就点到这里为止,以后有机会再讨论它的其他高级验证.ExtJs2.0学习系列- Ext.FormPanel之第三式上篇ExtJs2.0学习系列-Ext.FormPanel之第二式中我们讨论了下fieldset和表单验证的知识,今天我们接着深入解析表单元素中ComboBox组件的使用.会涉与到.net简单服务器数据交互,但暂不做深入讨论,以后会详细分析服务器交互相关,不过可能要等较长一段时间,呵呵!5. 服务器数据作为ComboBox的数据源实例首先从服务器获取json数据:/cs后台代码,要注意字符串格式public String ServerData=湖北,#,#;/aspx前台js介绍代码 Ext.onReadyfunctionvar combo=new Ext.form boBoxstore:,emptyText:请选择一个省份.,applyTo: combo;我们就通过这样的方式获取到了服务器最简单的属性数据.问题来了,js和html怎么调用c#后台的变量和方法？6. js和html怎么调用c#后台的变量和方法a) js调用c#后台变量,参考上面,注意,如果想获取string类型,请在js里用引号 var str=b) js调用c#后台方法:public String ServerDatareturnfdfdfdfdsf;input id=Text2 type=text value=%=ServerData%/c) js调用c#后台带参数的方法public String ServerData return pram+,我是参数传进来的;alert%=ServerData%;7. ComboBox的数据源store格式详解在前面的例子里面,我们一直给ComboBox的数据源store赋值一维数组,其实store支持多维和类型.下面就几种数据以代码举例说明一维数组:#,湖北,值同时赋给ComboBox的value和text二维和多维数组:one,bbar,111,two,tbar,222,第一维和第二维分别赋值给value和text,其他维忽略store类型:包括GroupingStore,JsonStore,SimpleStore.我们分三步走:var data=湖北,hubei,#,jiangxi,#,anhui;var store = new Ext.data.SimpleStore;var combo = new Ext.form boBox;这里我们介绍了两个新的参数displayField和mode,请记住,后面不再专门说明.8. ComboBox的value获取添加listeners事件:ComboBox的事件很多,我们无法一一讲解,但是我们可以举一反三,select事件就是其中典型的一个listeners:select:functionalertExt.get.dom.value; /获取id为combo的值这里我们提供了一种不是很好的方法,在此不做过多停留9. 把Extjs的ComboBox样式应用到select的下拉框中去核心参数介绍transform:id/用于转换样式的,TimeField作为ComboBox的子类也有此属性核心代码:/js代码var ExtSelect=new Ext.form boBox;浪曦博客园百度新浪10. ComboBox的其他重要参数a) valueField:valuefield/value值字段b) displayField:field/显示文本字段c) editable:false/false则不可编辑,默认为trued) triggerAction:all/请设置为all,否则默认为query的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为all的话,每次下拉均显示全部选项e) hiddenName:string/真正提交时此combo的name,请一定要注意f) typeAhead:true,/延时查询,与下面的参数配合g) typeAheadDelay:3000,/默认250关于combobox的其他花俏功能在此不多做介绍.最后一点,如何实现在aspx页面更灵活的分离cs数据和js数据的交互？因为我们都喜欢把js放在一个单独的文件,然后在aspx页面引用这样就有一个问题,我在js里直接获取cs数据就有点不方便.我认为可以这样,在aspx页面里获取数据,并作为js,你就js变量,你就可以在js里引用了,或者直接通过url地址获取.之所以这么啰嗦的讲combobox,是因为这个东西有时候真的让人又爱又恨!下篇中我们继续讲解form中其他的表单元素!ExtJs2.0学习系列-Ext.FormPanel之第四式11. checkbox简单示例效果图:js代码:Ext.onReadyfunctionExt.QuickTips.init;var myform=new Ext.FormPanelframe:true,width:330,layout:form,labelWidth:30,title:checkbox简单示例,labelAlign:left,renderTo:Ext.getBody,items:xtype:panel,layout:column,/也可以是table,实现多列布局fieldLabel:爱好,isFormField:true,/非常重要,否则panel默认不显示fieldLabelitems:columnWidth:.5,/宽度为50%xtype:checkbox,boxLabel:足球,/显示在复选框右边的文字name:,columnWidth:.5,xtype:checkbox,boxLabel:篮球,name:;关于多列布局,我们可以使用column或者table布局解决!a) checked:true/true则选中,默认为falseb) name:*/name值c) value:/初始化值,默认为undefine12. radio简单示例基本上和checkbox一样,不过注意一组单选框必须name值相同,才能单选.效果图:代码:Ext.onReadyfunctionExt.QuickTips.init;var myform=new Ext.FormPanelframe:true,width:330,layout:form,labelWidth:30,title:radio简单示例,labelAlign:left,renderTo:Ext.getBody,items:xtype:panel,layout:column,fieldLabel:性别,isFormField:true,items:columnWidth:.5,xtype:radio,boxLabel:男,name:sex/inputValue,columnWidth:.5,checked:true,xtype:radio,boxLabel:女,name:sex;13.htmleditor简单示例效果图:js代码:Ext.onReadyfunctionExt.QuickTips.init;var myform=new Ext.FormPanelframe:true,width:600,layout:form,labelWidth:50,title:htmleditor简单示例,labelAlign:top,/items中的标签的位置renderTo:Ext.getBody,items:xtype:htmleditor,id:he,fieldLabel:编辑器,anchor:99%;在这里我啰嗦个参数:u labelAlign:此参数是指form表单中items各项的label位置,默认值为left,枚举值有left,right,top我看见过有朋友认为此参数指title的位置,是错误的!几个其他的参数:a) hideLabel:true/默认为false,还适用于有标签的所有表单组件/下面的一组参数控制编辑器的工具栏选项,都是默认值为trueb) enableColors:true/默认为true,显示字体颜色,字体背景颜色c) enableAlignments:true/左,中,右对齐d) enableFont:true/字体e) enableFontSize:false/字体大小,就是A旁边有个小箭头的f) enableFormat:false/粗体,斜体,下划线g) enableLinks:true/h) enableLists:true/列表i) enableSourceEdit:true/源代码编辑14.datefield简单示例效果图:js代码:Ext.onReadyfunctionExt.QuickTips.init;var myform=new Ext.FormPanelframe:true,width:200,layout:form,labelWidth:30,title:dateditor简单示例,labelAlign:left,renderTo:Ext.getBody,items:xtype:datefield,fieldLabel:生日,anchor:99%;15.timefield简单示例把上面的例子中datefield改为timefield,效果图:16.numberfield简单示例:把上面的datefield改为numberfield,就只能输入数字了17.triggerfield简单示例说明:它提供了一个触发的事件onTriggerClick,datefield和combox都是继承它效果图:js代码:Ext.onReadyfunctionExt.QuickTips.init;var myform=new Ext.FormPanelframe:true,width:200,layout:form,labelWidth:30,title:triggerfield简单示例,labelAlign:left,renderTo:Ext.getBody,items:xtype:trigger,fieldLabel:触发,anchor:99%,onTriggerClick:function/在这里写你要实现的事件,很容易扩展alert;好了,关于form的几个基本组件我们都蜻蜓点水的看了一遍,相信大家感性上知道是怎么回事啦!前面有朋友说要做个一行多个控件,中间有文字的那种form布局,谢谢支持!下篇我们就做一个复杂点的form组件,还能提交服务器的综合示例!敬请期待!ExtJs2.0学习系列-Ext.FormPanel之第五式在上篇和前面的介绍中,我们基本上对form表单中常见组件有了简单的认识,今天我们做个综合点的例子,向服务器提交下!其实这篇文章很简单,没有什么发光点,暂放首页半天,忘各位理解!先来个简单的例子,以说明formpanel如何把数据传给其他页面.效果图:现在我们要实现的效果是:点击确定,把值传到另一页面!,如下:原页面js代码为:Ext.onReadyfunctionExt.QuickTips.init;var form=new Ext.FormPanelframe:true,width:300,/monitorValid:true,/绑定验证layout:form,labelWidth:70,title:添加个人信息,labelAlign:left,renderTo:Ext.getBody,submit: functionthis.getEl.dom.action = GetForm.aspx,this.getEl.dom.method=POST,this.getEl.dom.submit;