Extjs 各种框

1.ExtJs之消息框：
语法：Ext.MessageBox.alert(String title, String msg,Function fn, Obejct scope); 参数定义：

• title: 标题
• msg: 提示内容
• fn: 提示框关闭之后自动调用的回调函数
• scope: 作用域，用于指定this指向哪里

例如：

Js代码

2. ExtJsAlert=function(){
3. Ext.MessageBox.alert("提示框"，"这是一个提示框");
4. }
5. or
6. ExtJsAlert=function(){
7. Ext.MessageBox.alert("提示框"，"这是一个提示框",function(){
8. alert("提示框关闭")
9. });
10. }

如果要将上面的代码运行，则要将改源码保存JS，然后导入页面中，增加

Html代码

1. <inputtype="button"value="点击"onclick="ExtJsAlert();"/>

2. ExtJs 之输入框
语法：Ext.MessageBox.prompt(String title, String msg,Function fn,Object scope,Boolean/Number multiline);
参数定义：

• title: 标题
• msg: 提示内容
• fn: 提示框关闭之后自动调用的回调函数
• scope: 作用域，用于指定this指向哪里
• Boolean/Number:如果为true或为数字，则表示允许输入多行或者指定默认高度

例如：

Js代码

1. ExtJsPrompt=function(){
2. Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){
3. Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br>输入的内容为："+txt);
4. });
5. }
6. or
7. ExtJsPrompt=function(){
8. Ext.MessageBox.prompt("输入框","请输入名字：",function(bu,txt){
9. Ext.MessageBox.alert("Result","你点击的是"+bu+"按钮,<br>输入的内容为："+txt);
10. },this,300);
11. }

3.ExtJs之确认框
语法：
Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope);
参数定义：

• title: 标题
• msg: 提示内容
• fn: 提示框关闭之后自动调用的回调函数
• scope: 作用域，用于指定this指向哪里

例如：

Js代码

1. ExtJsComfirm=function(){
2. Ext.MessageBox.confirm("确认"，"请点击下面的按钮作出选择",function(btn{
3. Ext.MessageBox.alert("你单击的按钮是："+btn);
4. });
5. }

4. ExtJs之自定义消息框
语法：
Ext.MessageBox.show(Object config); config属性说明：

• title : 消息框标题栏
• msg:消息内容
• width:消息框的宽度
• multiline: 是否显示多行文本
• closable:是否显示关闭按钮
• buttons:按钮
• icon:图标
• fn:回调函数

例如

Js代码

1. ExtJsCustom=function(){
2. varconfig={
3. title:"自定义对话框",
4. msg:"这是一个自定义对话框",
5. width:400,
6. multiline:true,
7. closable:false,
8. buttons:Ext.MessageBox.YESNOCANCEL,
9. icon:Ext.MessageBox.QUESTION,
10. fn:function(btn,txt){
11. Ext.MessageBox.alert("Result","你点击了'yes'按钮<br>,输入的值是："+txt);
13. };
14. Ext.MessageBox.show(config);
15. }

注意： 在ExtJs.MessageBox中已经定义了buttons的取值.如下

引用

OK：只有"确定"按钮
CANCEL:只有"取消"按钮
OKCANCEL:有"确定"和"取消"按钮
YESNO: 有"是"和"否"按钮
YESNOCANCEL：有"是"、"否"和"取消"按钮

icons取值如下

引用

INFO:信息图标
WARNING:警告图标
QUESTION:询问图标
ERROR:错误图标

5.ExtJs之进度条对话框
进度条对话框也是自定义消息框的一种，只是在配置Config时添progress=true即可,同时在设置其他相关信息，比如进度提示。
下面看看代码：

Js代码

1. ExtJsProgress=function(){
2. Ext.MessageBox.show({
3. title:'请等待片刻',
4. msg:'正在加载项目....',
5. progressText:'正在初始化...',
6. Width:300,
7. progress:true,
8. closable:false
9. });
10. varf=function(v){
11. returnfunction(){
12. if(v==12){
13. Ext.MessageBox.hide();
14. Ext.MessageBox.alert('完成','所有项目加载完成!');
15. }else{
16. vari=v/11;
17. Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成');
18. }
19. };
20. };
21. for(vari=0;i<13;i++){
22. setTimeout(f(i),i*500);
23. }
24. }

解析上述代码中ProgressText属性是进度条滚动之前最初的文本，滚动进程由updateProgress(Number value,String progressText)方法来定义,参数value是从0-1之间的小数，表示进度百分比;progressText则表示进度条滚动过程中的文本提示信息。

6.ExtJs之消息框动画效果
直接看代码

Js代码

1. ExtJsAnimal=funciton(){
2. varconfig={
3. title:"飞出的消息框",
4. msg:"这是一个自定义对话框，是飞出来的哦",
5. width:400,
6. multiline:true,
7. closable:false,
8. buttons:Ext.MessageBox.YESNOCANCEL,
9. icon:Ext.MessageBox.QUESTION,
10. animEl:"fly"
11. };
12. Ext.MessageBox.show(config);
13. }

在html代码中加入

Html代码

1. <inputtype="button"value="Animal"id="fly"onclick="ExtJsAnimal();"/>
2. =fly就是animEL的值