文档库 最新最全的文档下载
当前位置:文档库 › ExtJs2.0入门文档

ExtJs2.0入门文档

ExtJs2.0入门文档
ExtJs2.0入门文档

ExtJs2.0学习系列(1)--Ext.MessageBox

1.Ext.MessageBox.alert()方法

有四个参数,为简单起见,主要介绍前面三个参数:

alert( title , msg , function(){} )

Ext.MessageBox.alert();

其中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-qianxudetianxia

Ext.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:弹出框内容前面的图标,取值为https://www.wendangku.net/doc/ee7031047.html,,

Ext.MessageBo x.ERROR,

Ext.MessageBox.WARNING,

Ext.MessageBox.QUESTION

8.width:弹出框的宽度,不带单位

9.prompt:设为true,则弹出框带有输入框

10.multiline:设为true,则弹出框带有多行输入框

11.progress:设为true,显示进度条,(但是是死的)

12.progressText:显示在进度条上的字

13.wait:设为true,动态显示progress

14.waitConfig:配置参数,以控制显示progress

example:

Ext.MessageBox.show({

title:"标题",

msg:"内容的消息",

buttons:{"ok":"我不再显示OK了"},

fn:function(e){alert(e);},

animEl:"test1",

width:500,

icon:https://www.wendangku.net/doc/ee7031047.html,,

你在

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",

width:300,

closable:true

});

var f=function(v){

return function(){

if(v==12)

{

Ext.MessageBox.hide();

//alert("加载完成!");

}

else

{

var i=v/11;

Ext.MessageBox.updateProgress(i,Math.round(100*i)+ "% completed",i);

}

}

}

for(var i=1;i<13;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进度条自动加载一定长度

});

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

上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox,受到了大家的褒贬不一,还是有的朋友提出好的建议,在此表示感谢!

今天介绍extjs中的Panel组件。

//html代码

//js代码

var p = new Ext.Panel({

title: '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组件的配置参数和相关的属性、方法。

//配置参数(只列举部分常用参数)

1.autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据

2.autoScroll:设为true则内容溢出的时候产生滚动条,默认为false

3.autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为false

4.bbar:底部条,显示在主体内,//代码:bbar:[{text:'底部工具栏bottomToolbar'}],

5.tbar:顶部条,显示在主体内,//代码:tbar:[{text:'顶部工具栏

topToolbar'}],

6.buttons:按钮集合,自动添加到footer中(footer参数,显示在主体外)//代码:buttons:[{text:"按钮位于footer"}]

7.buttonAlign:footer中按钮的位置,枚举值为:"left","right","center",默认为right

8.collapsible:设为true,显示右上角的收缩按钮,默认为false

9.draggable:true则可拖动,但需要你提供操作过程,默认为false

10.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组件中去):

1.可拖动的panel实例

下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件.

//html代码

..无..

//下面创建一个允许拖动的panel,但是拖动的结果不能保存

var p=new Ext.Panel({

title: 'Drag me',

x: 100,

y: 100,

renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel 的位置

floating: true,//true

frame: true,//圆角边框

width: 400,

height: 200,

draggable:true

}).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 : function(e){

this.panel.setPosition(this.x, this.y);//移动到最终位置

}

}

实现了可保存的拖动,如图:

拖动的时候阴影还在原位置,我们再在draggable中的onDrag事件中添加代码:var s = this.panel.getEl().shadow;

if (s) {

s.realign(this.x, this.y, pel.getWidth(), pel.getHeig ht());

}

//shadow的realign方法的四个参数,改变shadow的位置大小属性

最后这个可拖动的panel的代码为:

var p=new Ext.Panel({

title: 'Drag me',

x: 100,

y: 100,

renderTo: Ext.getBody(),

floating: true,

frame: true,

width: 400,

height: 200,

draggable: {

insertProxy: false,

onDrag : function(e){

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.getHeig ht());

}

},

endDrag : function(e){

this.panel.setPosition(this.x, this.y);

}

}

})

//效果图片我就不贴出来了

2.带顶部,底部,脚部工具栏的panel

var p=new Ext.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时的默认值)

close

minimize

maximize

restore

gear

pin

unpin

right

left

up

down

refresh

minus

plus

help

search

save

print

关于panel今天就讨论到这里,欢迎批评!一起期待下一片文章.

ExtJs2.0学习系列(3)--Ext.Window

前面介绍了panel组件--ExtJs2.0学习系列(2)--Ext.Panel,今天将介绍window 组件,它继承自panel。

先介绍个最简单例子

//html代码

//js代码

var w=new Ext.Window({

contentEl:"win",//主体显示的html元素,也可以写为el:"win" width:300,

height:200,

title:"标题"

});

w.show();

参数介绍:

因为前面已经介绍了panel组件,下面只介绍window组件的几个其他特别的配置参数

//几个前面没有介绍的window自己的配置参数

1.closeAction:枚举值为:close(默认值),当点击关闭后,关闭window窗口 hide,关闭后,只是hidden窗口

2.closable:true在右上角显示小叉叉的关闭按钮,默认为true

3.constrain:true则强制此window控制在viewport,默认为false

4.modal:true为模式窗口,后面的内容都不能操作,默认为false

5.plain://true则主体背景透明,false则主体有小差别的背景色,默认为false

//需要显示下show()方法,默认的窗口是可拖动的,可关闭的,可拖动大小的w.show()

实例介绍:

1.嵌套了tabpanel的window

var w=new Ext.Window({

contentEl:"win",

width:300,

height:200,

items:new Ext.TabPanel({

activeTab:0,//当前标签为第1个tab(从0开始索引) border:false,

items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]//TabPanel中的标签页,以后再深入讨论

}),

plain:true,//true则主体背景透明,false则主体有小差别的背景色,默认为false

title:"标题"

});

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,//右上角的收缩按钮

ExtJs2.0学习系列(4)--Ext.FormPanel之第一式

上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel 组件的使用。

首先弄清楚这个问题,创建的时候:

//查看源代码便知,两种方法是一样的

Ext.form.FormPanel = Ext.FormPanel;

我们还是从最简单的代码实例开始吧:

//js代码

var form1 = new Ext.form.FormPanel({

width: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:function(){alert("事件!");}}]

});

都是通过items属性参数把表单元素添加到这个表单中。

我们发现两个文本框的类型和狂度是一样的,我们还可以把items里面的相同项提取出来,以简化代码:

//简化代码,和上面的代码效果一样

var form1 = new Ext.form.FormPanel({

width: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:function(){alert();}}]

});

关于inputType,参数如下:

//input的各种类型(这个大家都知道,就只列了几个典型的)

radio

check

text(默认)

file

password等等

关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:https://www.wendangku.net/doc/ee7031047.html,belAlign:fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right"

https://www.wendangku.net/doc/ee7031047.html,belWidth:fieldlabel的占位宽

3.method:"get"或"post"

4.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: 'https://www.wendangku.net/doc/ee7031047.html,'

},{

xtype:"combo",

name: 'sex',

store:["男","女","保密"],//数据源为一数组

fieldLabel:"性别",

emptyText:'请选择性别.'

}]

}

]

这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的内

容中详细探讨。

2.关于xtype的类型,在extjs的form表单(其他的请参考api)中已经定义的有:

Form components

---------------------------------------

form Ext.FormPanel

checkbox Ext.form.Checkbox

combo https://www.wendangku.net/doc/ee7031047.html,boBox

datefield Ext.form.DateField

field Ext.form.Field

fieldset Ext.form.FieldSet

hidden Ext.form.Hidden

htmleditor Ext.form.HtmlEditor

label https://www.wendangku.net/doc/ee7031047.html,bel

numberfield Ext.form.NumberField

radio Ext.form.Radio

textarea Ext.form.TextArea

textfield Ext.form.TextField

timefield Ext.form.TimeField

trigger Ext.form.TriggerField

不早了,FormPanel还有很多的东西要了解,但是今天不能再讲了,太多了,大家都没有兴致看下去,明天继续。

extjs的东西很庞大,但是还没有一个人用中文系统的分析写文章,所以资料都很可贵,现在我想做这件事,请大家多多支持,我才有动力,

才有激情,才能写出更好的下一片文章,让我们期待更精彩的next吧!

ExtJs2.0学习系列(5)--Ext.FormPanel之第二式

上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox,今天我们继续把这个话题说下去,说全一点,说深一点。

3.可选的fieldset实例

其实就是带个chechbox,有点像论坛注册时有一部分是选填信息的那种效果,主要知识点:

//因为觉得这个参数特别,特举一例以说明

1.checkboxToggle:true//true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为false

2.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.Field.prototype.msgTarget='side';//提示的方式,枚举值为"qtip","title","under","side",id(元素id)

//side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示,其他的我就不介绍了,可自行验证

//大家可以分别去掉这两行代码,看效果就会明白他们的作用,(放在onReady 的function(){}中)

1.我们看一个最简单的例子:空验证(其实这不算是一个专门的验证例子)

//空验证的两个参数

1.allowBlank:false//false则不能为空,默认为true

2.blankText:string//当为空时的错误提示信息

js代码为:

var form1 = new Ext.form.FormPanel({

width:350,

frame:true,

renderTo:"form1",

labelWidth:80,

title:"FormPanel",

bodyStyle:"padding:5px 5px 0",

defaults:{width:150,xtype:"textfield",inputType:"password"}, items:[

{fieldLabel:"不能为空",

allowBlank:false,//不允许为空

blankText:"不能为空,请填写",//错误提示信息,默认为This field is required!

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验证,要求的格式是"langsin@https://www.wendangku.net/doc/ee7031047.html,"

4.url//url格式验证,要求的格式是https://www.wendangku.net/doc/ee7031047.html,

3.确认密码验证(高级自定义验证)

前面的验证都是extjs已经提供的验证,我们也可以自定义验证函数,比上面要复杂点了。我们一起做一个密码确认的例子。

我们修改前面的代码:

//先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)Ext.apply(Ext.form.VTypes,{

password:function(val,field){//val指这里的文本框值,field指这个文本框组件,大家要明白这个意思

if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值

var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id 的值

return (val==pwd.getValue());

}

return true;

}

});

//配置items参数

items:[{fieldLabel:"密码",

id:"pass1",

anchor:"90%"

},{

fieldLabel:"确认密码",

id:"pass2",

vtype:"password",//自定义的验证类型

vtypeText:"两次密码不一致!",

confirmTo:"pass1",//要比较的另外一个的组件的id

anchor:"90%"

}

相关文档