1、ExtJs基本教程ExtJs2.0学习系列(1)-Ext.MessageBox发布时间:2011-1-15 大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个系列的文章。个人认为用extjs做后台很不错,布局比较完美!1.Ext.MessageBox.alert()方法 有四个参数,为简单起见,主要介绍前面三个参数:alert( title , msg , function() )其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发。Ext.MessageBox.alert(title,msg); Ext.MessageBox.a
2、lert(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.MessageBox.prompt()方法 有六个参数,比前面alert方法多一个返回值和是否多行。 Ext.MessageBox.pro
3、mpt(title,msg);Ext.MessageBox.prompt(title,msg,function(e,text)alert(e+-+text););/输入qianxudetianxia,点击ok按钮,弹出ok-qianxudetianxiaExt.MessageBox.prompt(title,msg,function(e,text)alert(e+-+text);,this,true);/true为多行,this表示作用域4.Ext.MessageBox.show()方法 功能很强大,采用config配置形式,比前面的方法使用更方便。 参数很多,在此列举最常用的配置参数:1.a
4、nimEl:对话框弹出和关闭时的动画效果,比如设置为“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.M
5、essageBox.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
6、(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,Pro
7、gressText,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.updat
8、eProgress(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:tr
9、ue);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:tru
10、e,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 ,受到了大家的褒贬不一,还是有的朋友提出好的建
11、议,在此表示感谢!今天介绍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组件,所以非常有必要
12、介绍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:
13、按钮集合,自动添加到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:设为t
14、rue,则点击标题栏的任何地方都能收缩,默认为false.15.applyTo:(id)呈现在哪个html元素里面16.contentEl:(id)呈现哪个html元素里面,把el内的内容呈现17.renderTo:(id)呈现在哪个html元素里面/关于这三个参数的区别(个人认为:applyTo和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去):英文如下(本人英语poor,不敢乱翻译):contentEl-Thisconfigoptionisusedtotakeexistingcontentandplaceitinthebodyofanewpan
15、el.Itisnotgoingtobetheactualpanelitself.(ItwillactuallycopytheinnerHTMLoftheelanduseitforthebody).Youshouldaddeitherthex-hiddenorthex-hide-displayCSSclasstopreventabriefflickerofthecontentbeforeitisrenderedtothepanel.applyTo-Thisconfigoptionallowsyoutousepre-definedmarkuptocreateanentirePanel.Byenti
16、re,Imeanyoucanincludetheheader,tbar,body,footer,etc.Theseelementsmustbeinthecorrectorder/hierarchy.Anycomponentswhicharenotfoundandneedtobecreatedwillbeautogenerated.renderTo-ThisconfigoptionallowsyoutorenderaPanelasitscreated.ThiswouldbethesameassayingmyPanel.render(ELEMENT_TO_RENDER_TO);哪位大人帮忙翻译下.
17、考虑到入门,方法事件会在以后的文章中以实例穿插。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();/在这里也可以
18、不show()但是还不能拖到其他的地方,我们需要改写draggable:draggable:insertProxy:false,/拖动时不虚线显示原始位置onDrag:function(e)varpel=this.proxy.getEl();this.x=pel.getLeft(true);this.y=pel.getTop(true);/获取拖动时panel的坐标,endDrag:function(e)this.panel.setPosition(this.x,this.y);/移动到最终位置实现了可保存的拖动,如图:拖动的时候阴影还在原位置,我们再在draggable中的onDrag事件中
19、添加代码: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:f
20、unction(e)varpel=this.proxy.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
21、:标题,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激发出来的弹出框!),tex
22、t:按钮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时的默认值)closeminimizemaximizerest
23、oregearpinunpinrightleftupdownrefreshminusplushelpsearchsaveprint关于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代码divid=winclass=x-hi
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1