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

大家都知道,刚开始搞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-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.CANCEL,
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.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:Ext.MessageBox.INFO,
  closable:false,
  progress:true,
  wait:true,
  progressText:"进度条"
 //prompt:true
 //multiline:true
});

时间: 2024-10-24 18:21:18

ExtJs2.0学习系列(1)--Ext.MessageBox的相关文章

ExtJs2.0学习系列(2)--Ext.Panel

上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不一,还是有的朋友提出好的建议,在此表示感谢! 今天介绍extjs中的Panel组件. //html代码 <div id="container"> </div> //js代码 var p = new Ext.Panel({ title: 'My Panel',//标题 collapsible:true,//右上角上的那个收缩按钮,设为false则不显示 renderTo:

ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)

前言:说句实话,此extjs系列的文章在博客园中的热度不高,可能是学这玩意的人不多吧,但是我觉得有这么个系列的文章对于中国朋友非常有帮助!请大家支持! 上篇ExtJs2.0学习系列(5)--Ext.FormPanel之第二式中我们讨论了下fieldset和表单验证的知识,今天我们接着深入解析表单元素中ComboBox组件的使用.会涉及 到.net简单服务器数据交互,但暂不做深入讨论,以后会详细分析服务器交互相关,不过可能要等较长一段时间,呵呵! 5.服务器数据作为ComboBox的数据源实例 首

ExtJs2.0学习系列(12)--Ext.TreePanel之第一式

今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列(2)--Ext.Panel 1.第一个静态树--最简单的树 效果图: html代码: <div id="container"> </div> js代码: Ext.onRea

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

前面介绍了panel组件--ExtJs2.0学习系列(2)--Ext.Panel,今天将介绍window组件,它继承自panel. 先介绍个最简单例子 //html代码 <div id="win" class="x-hidden"> </div> //js代码 var w=new Ext.Window({ contentEl:"win",//主体显示的html元素,也可以写为el:"win" width

ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)

N久没有写extjs的,作为一个新手,我为我的这种懒惰行为感到惭愧! 鉴于有朋友反应前面的文章过于简单,我决定以后的文章如果没有闪光点就放在新手区(如果不适合,请跟帖),不放在首页! 11.checkbox简单示例 效果图: js代码: Ext.onReady(function(){ Ext.QuickTips.init(); var myform=new Ext.FormPanel({ frame:true, width:330, layout:"form", labelWidth:

ExtJs2.0学习系列(10)--Ext.TabPanel之第二式

上一篇种我们简单的了解了下tabpanel 下面我们要介绍的是,如何动态的添加标签页! 2.动态添加tabpanel的标签页 效果图: 点击"添加新标签页",会添加一个标签页,而且激活这个新的标签页. html代码: <body style="margin:10px;"> <div> <a id="AddNewTab" href="javascript:void(0)">添加新标签页<

ExtJs2.0学习系列(11)--Ext.XTemplate

XTemplate是Extjs里面的模板组件. 下面我们看个最简单的例子. 效果图: js代码: Ext.onReady(function(){ //数据源 var data={ name:"博客园", read:[{ book:'<<道不远人>>', date:'2007-7-7' },{ book:"<<大话设计模式>>", date:"2006-6-6" }] } //呈现组件 var myp

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

上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox,今天我们继续把这个话题说下去,说全一点,说深一点. 3.可选的fieldset实例 其实就是带个chechbox,有点像论坛注册时有一部分是选填信息的那种效果,主要知识点: //因为觉得这个参数特别,特举一例以说明 1.checkboxToggle:true//true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为false 2.checkboxName:string//当上面为true

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

上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel组件的使用. 首先弄清楚这个问题,创建的时候: //查看源代码便知,两种方法是一样的 Ext.form.FormPanel=Ext.FormPanel; 我们还是从最简单的代码实例开始吧: <!--html代码--> <body> <div id="form1"></div> </body> //js代码 var form