ExtJs入门文档格式.docx

1、e） title:标题;f） fn:关闭弹出框后执行的函数;g） icon:弹出框内容前面的图标,【Ext.MessageBox.INFO】【Ext.MessageBox.ERROR】【Ext.MessageBox.WARNING】【Ext.MessageBox.QUESTION】h） width:弹出框的宽度,不带单位;i） prompt:设为true,则弹出框带有输入框,默认为false;j） multiline:设为true,则弹出框带有多行输入框k） progress:设为true,显示进度条,（但是是死的）l） progressText:显示在进度条上的字m） wait:设为true

2、,动态显示progressn） waitConfig:配置参数,以控制显示progressExt.MessageBox.show（ title:标题 msg:内容的消息 buttons:我不再显示OK了, fn:function（e）alert（e）; animEl:test1 width:500, icon:Ext.MessageBox.INFO, closable:false, progress:true, wait: progressText:进度条 /prompt:true /multiline:5. Ext.MessageBox.show（）中的进度条的使用首先必须知道另外两个方法E

3、xt.MessageBox.hide（）和Ext.MessageBox.updateProgress（value,ProgressText）（三个参数,看名字就知道意思）,【注意】value为0-1之间的数,表示进度条的进度.第一种:（通过进度的大小控制进度,满进度为1） Ext.get（btn1）.on（clickfunction（） Ext.MessageBox.show（ title:df msg:dfd progress: width:300, closable: ）; var f=function（v） return function（） if（v=12） Ext.MessageBo

4、x.hide（）; Else var i=v/11; Ext.MessageBox.updateProgress（i,Math.round（100*i）+% completed,i）; for（var i=1;i13;i+） setTimeout（f（i）,i*500）; /从点击时就开始计时,所以500*i表示每500ms就执行一次第二种:（通过固定时间控制进度加载）时间进度条5s后关闭进度框 wait: waitConfig:interval:600,/0.6s进度条自动加载一定长度 setTimeout（function（）Ext.MessageBox.hide（）,5000）; /5后

5、执行关闭窗口函数最后关于那个waitConfig的参数,在此说明下:a） interval:进度的频率b） duration:执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度狂也不会消失.c） fn:duration的时间到后执行的函数所以,上面的通过时间控制进度另外一种写法为: interval:600, duration:5000, fn:/让进度条消失 , /setTimeout（function（）Ext.MessageBox.hide（）,5000）;ExtJs2.0学习系列（2）-Ext.Panel今天 介绍 extjs 中的 Panel 组件.d

6、iv id=container/div- js代码 -var p = new Ext.Panel（ My Panel, /标题 collapsible:true, /右上角上的那个收缩按钮,设为false则不显示 renderTo:container, /这个panel显示在html中id为container的层中400, height:200, html: p我是内容,我包含的html可以被执行!/p/panel主体中的内容,可以执行html代码因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel 组件,所以非常有必要介绍Panel组件

7、的配置参数和相关的属性、方法./配置参数（只列举部分常用参数）a） autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据b） autoScroll:设为true 则 内容溢出的时候产生滚动条,默认为falsec） autoShow:设为true显示设为x-hidden的元素,很有必要,默认为falsed） bbar:底部条,显示在主体内, /代码:bbar:text:底部工具栏bottomToolbare） tbar:顶部条,显示在主体内, /代码:tbar:顶部工具栏topToolbarf） buttons:按钮集合,自

8、动添加到footer中（footer参数,显示在主体外）/ 代码 :buttons:按钮位于footerg） buttonAlign:footer中按钮的位置,枚举值为:leftrightcenter,默认为righth） collapsible:设为true,显示右上角的收缩按钮,默认为falsei） draggable:true则可拖动,但需要你提供操作过程,默认为falsej） html:主体的内容k） id:id值,通过id可以找到这个组件,建议一般加上这个id值l） width:宽度m） height:高度n） title:标题o） titleCollapse:设为true,则点击标

9、题栏的任何地方都能收缩,默认为false.p） applyTo:（id）呈现在哪个html元素里面q） contentEl:（id）呈现哪个html元素里面,把el内的内容呈现r） renderTo:/ 关于这三个参数的区别（个人认为:applyTo和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去）;关于contentEl有资料如下:ContentEl-Thisconfigoptionisusedtotakeexistingcontentandplaceitinthebodyofanewpanel.Itnotgoingbeactualpanelit

10、self.（ItwillactuallycopyinnerHTMLeluseforbody）.Youshouldaddeitherx-hiddenorx-hide-displayCSSclasspreventbriefflickerbeforerenderedApplyToallowsyoupre-definedmarkupcreateanentirePanel.Byentire,Imeancanincludeheader,tbar,body,footer,etc.Theseelementsmustcorrectorder/hierarchy.Anycomponentswhicharefoun

11、dneedcreatedautogenerated.RenderTorenderPanelasitscreated.wouldsamesayingmyPanel.render（ELEMENT_TO_RENDER_TO）;考虑到入门,方法事件会在以后的文章中以实例穿插.1. 可拖动的panel实例下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件./下面创建一个允许拖动的panel,但是拖动的结果不能保存var p=new Ext.Panel（Drag me x: 100, y: Ext.getBody（）,/x,y,renderTo:Ext.getBody（）初始化panel的

12、位置 floating: true, /true frame: true, /圆角边框 400, 200, draggable:）.show（）; /在这里也可以不show（）但是还不能拖到其他的地方,我们需要改写draggable:draggable: insertProxy: false,/拖动时不虚线显示原始位置 onDrag : function（e） var pel = this.proxy.getEl（）; this.x = pel.getLeft（true）; this.y = pel.getTop（true）;/获取拖动时panel的坐标 , endDrag : this.pa

13、nel.setPosition（this.x, this.y）;/移动到最终位置实现了可保存的拖动,如图:拖动的时候阴影还在原位置,我们再在draggable中的onDrag事件中添加代码:/shadow的realign方法的四个参数,改变shadow的位置大小属性var s = this.panel.getEl（）.shadow;if （s） s.realign（this.x, this.y, pel.getWidth（）, pel.getHeight（）;最后这个可拖动的panel的代码为: Ext.getBody（）, true, insertProxy: false, onDrag :

14、 var pel = this.proxy.getEl（）; this.x = pel.getLeft（true）; this.y = pel.getTop（true）; var s = this.panel.getEl（）.shadow; if （s） s.realign（this.x, this.y, pel.getWidth（）, pel.getHeight（）; , endDrag : this.panel.setPosition（this.x, this.y）;）2. 带顶部,底部,脚部工具栏的panel id:panel1 tbar:按钮1,text:按钮2, /顶部工具栏 bba

15、r:, /底部工具栏内容 /footer部工具栏我们已经在各种工具栏上添加了按钮,但是却没有激发事件,下面我们来添加按钮事件代码:,handler: Ext.MessageBox.alert（我是按钮1我是通过按钮1激发出来的弹出框!）, text:,改写tbar,添加handler句柄,点击顶部工具栏上按钮1,弹出提示框,效果图大家想象下,就不贴出来了当然,一般情况下,我们只要一个工具栏,这里只是为了演示!3.panel工具栏添加下面的代码到panel配置参数中:tools:id:save,id:helpup id:close handler: Ext.MessageBox.alert（工具

16、栏按钮工具栏上的关闭按钮时间被激发了） ,/id控制按钮,handler控制相应的事件id的枚举值为:toggle（collapsable为true时的默认值）close minimize maximize restore gear pin unpin right left up down refreshminus plus help search save printExtJs2.0学习系列（3）-Ext.Window介绍window组件,它继承自panel.先介绍个最简单例子win class=/js代码var w=new Ext.Window（ contentEl:,/主体显示的html

17、元素,也可以写为el:w.show（）;参数介绍:因为前面已经介绍了panel组件,下面只介绍window组件的几个其他特别的配置参数/几个前面没有介绍的window自己的配置参数a） closeAction:枚举值为:close（默认值）,当点击关闭后,关闭window窗口,关闭后,只是hidden窗口b） closable:true在右上角显示小叉叉的关闭按钮,默认为truec） constrain:true则强制此window控制在viewport,默认为falsed） modal:true为模式窗口,后面的内容都不能操作,默认为falsee） plain:/true则主体背景透明,fa

18、lse则主体有小差别的背景色,默认为falsew.show（）/需要显示下show（）方法,默认的窗口是可拖动的,可关闭的,可拖动大小的实例介绍:1. 嵌套了tabpanel的window items:new Ext.TabPanel（ activeTab:0,/当前标签为第1个tab（从0开始索引） border: items:title:tab1,html:tab1在windows窗口中 title:tab2tab2在windows窗口中）, plain:true,/true则主体背景透明,false则主体有小差别的背景色,默认为false我们通过items把TabPanel组件嵌套在wi

19、ndow的主体中去了.我们再添加工具栏看看确定取消function（）w.close（）;,/bottom部,/footer部buttonAlign:,/footer部按钮排列位置,这里是中间其他工具栏方法一样.关于window中嵌套复杂的布局,等我们谈完了extjs布局再举例说明.ExtJs2.0学习系列（4）-Ext.FormPanel之第一式上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel组件的使用.首先弄清楚这个问题,创建的时候:Ext.form.FormPanel=Ext.FormPanel; /查看源代码便知,两种方法是一样

20、的我们还是从最简单的代码实例开始吧:-html代码-form1var form1 = new Ext.form.FormPanel（350,true,/圆角和浅蓝色背景,/呈现在哪个控件里FormPanel bodyStyle:padding:5px 5px 0 fieldLabel:UserName,/文本框标题 xtype:textfield, /表单文本框 name:user id:200 ,PassWordpassfunction（）alert（事件!都是通过items属性参数把表单元素添加到这个表单中.我们发现两个文本框的类型和宽度是一样的,我们还可以把items里面的相同项提取出来,以简化代码:/简化代码,和上面的代码效果一样f