ExtJs入门实例

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.MessageBox.prompt()方法有六个参数，比前面alert方法多一个返回值和是否多行。Ext.MessageBox.prompt(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.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(加载完成！);}else{vari=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代码divid=container/div//js代码varp=newExt.Panel({title:'MyPanel',//标题collapsible:true,//右上角上的那个收缩按钮，设为false则不显示renderTo:'container',//这个panel显示在html中id为container的层中width:400,height:200,html:p我是内容，我包含的html可以被执行！/p//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:按钮位于footer}]7.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代码..无..//下面创建一个允许拖动的p