ExtJs2.0 Learning Series (1)--ext.messagebox

Source: Internet
Author: User

We all know, just started to engage in ExtJS, it is a little difficult, so I just started after beginners prepared this series of articles.

Personally think with ExtJS do backstage is very good, the layout is more perfect!

1.ext.messagebox.alert () method

There are four parameters, for the sake of simplicity, the first three parameters are mainly described:

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

其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发。

Ext.MessageBox.alert("title","msg");

Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出!")});

2.ext.messagebox.confirm () method

Basically exactly the same as the alert () method.

Note this:

Ext.MessageBox.confirm("title","msg",function(e){alert(e);});

What is this parameter E? It is the value of the button that you clicked on the pop-up box, three values: Yes,no,cancel. The Alert () method is the same, but there are only two values: Ok,cancel.

3.ext.messagebox.prompt () method

There are six parameters, a return value and multiple rows than the previous alert method.

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 () method

The function is very powerful, uses the config configuration form, is more convenient than the previous method use.

Many parameters, here are the most commonly used configuration parameters:

1.animEl: The animation effect when the dialog box pops up and closes, for example, set to "Id1", then eject and produce the animation from the ID1, the contraction is opposite

2.buttons: The settings of the pop-up button, mainly have the following: Ext.Msg.OK,

Ext.Msg.OKCANCEL,
Ext.Msg.CANCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL

You can also customize the words on the button: {"OK", "I was OK"}.

If set to False, no buttons are displayed.

3.closable: If False, the small fork in the upper-right corner is not displayed, and the default is true.

4.msg: "Content of the message"

5.title: "title"

6.fn: Functions that are executed after the pop-up box is closed

7.icon: The icon in front of the popup content, the value is Ext.MessageBox.INFO,

Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION

8.width: The width of the pop-up box without units

9.prompt: Set to True, pop-up box with input box

10.multiline: Set to True, pop-up box with multiline input box

11.progress: Set to True, show progress bar (but dead)

12.progressText: The word displayed on the progress bar

13.wait: Set to True for dynamic display of progress

14.waitConfig: Configure parameters to control display 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
});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.