深入浅出ExtJS 第七章 弹出窗口

7.1 Ext.MessageBox

7.1 Ext.MessageBox 2   //Ext.MessageBox为我们提供的alert/confirm/prompt等完全可以代替浏览器原生; 3 7.1.1 Ext.MessageBox.alert() 4   Ext.MessageBox.alert('标题','内容',function(btn){ 5     //参数一:窗口的标题; 6     //参数二:窗口的内容; 7     //参数三:回调函数; 8     alert('你刚刚点击了'+btn); 9   });10 11 7.1.2 Ext.MessageBox.confirm()12   //confirm为用户提供了Yes和No,它们会在需要用户作出判断时用到;13   Ext.MessageBox.confirm('选择框','你要选择yes还是no?',function(btn){14     alert('你刚刚点击了'+btn);15   });16   //用户选择Yes或No之后,回调函数即被调用,btn参数的值可能是yes或no,通过得到的值就可以知道用户点击了哪个按钮;17 18 7.1.3 Ext.MessageBox.prompt()19   //prompt允许用户输入一段字符串,然后提交给JS处理;20   //prompt还提供了两个按钮,用户可以决定是否将输入的内容提交;21   Ext.MessageBox.prompt('输入框','你输入帐号',function(btn,text){22     alert('你刚刚点击了'+btn+',你刚刚输入了'+text);23   });24   //回调函数参数一:代表用户点击的按钮;25   //回调函数参数二:用户输入的字符;

 

7.2 对话框的更多配置--show()

7.2 对话框的更多配置--show() 2 7.2.1 可以输入多行的输入框 3   Ext.MessageBox.show({ 4     title:'多行输入框',       //对话框标题; 5     msg:'你可以输入好几行',   //对话框显示的提示内容; 6     width:300, 7     buttons:Ext.MessageBox.OKCANCEL,  //对话框的按钮,Ext.MessageBox已预置; 8     multiline:true,           //允许多行; 9     fn:function(btn,text){    //回调函数;10       alert('你刚刚点击了'+btn+',你刚刚输入了'+text);11     }12   });13 14 7.2.2 自定义对话框的按钮15   Ext.MessageBox.show({16     ...17     buttons:Ext.MessageBox.YESNOCANCEL,18     //Ext.MessageBox预置的yes/no/cancle按钮;19     ..20   });21 22 7.2.3 进度条23   //Ext.MessagesBox提供了默认的进度条;24   Ext.MessageBox.show({25     title:'请等待',26     msg:'读取数据中',27     width:240,28     progress:true,        //显示进度条参数;29     closable:false        //隐藏右上角的关闭按钮;30   });31   var f = function(v){32     return function(){33       if(v == 11){34         Ext.MessageBox.hide();35       }else{36         Ext.MessageBox.updateProgress(v/10,'正在读取第'+v+'个,一共10个');37         //updateProgress()函数让进度条状态发生变化;38       }39     };40   };41   for(var i=1; i<12; i++){42     setTimeout(f(i),i*1000); 43     //定时器;10秒之后进度条将隐藏;44   }45   //也可以直接使用progress函数↓↓↓↓↓46   Ext.MessageBox.progress('请等待',msg:'读取数据中');47   >2.自动变化的进度条提示框48   Ext.MessageBox.wait('请等待',msg:'读取数据中');49 50 7.2.4 动画效果51   //使用animEl:为对话框设置弹出和关闭的动画效果;52   //对话框会依据指定的HTML元素播放弹出和关闭的动画;53   Ext.MessageBox.show({54     ...55     animEl:'dialog'56     //对应动画是基于id='dialog'的元素;57   });58 59 //Ext.MessageBox =Ext.Msg60 //Ext.Msg弹出的对话框都是基于同一个内部Ext.Window实例;因此不能同时使用Ext.MessageBox弹出多个对话框;页面只会显示最后一个窗口;

 

7.3 Ext.Window的常用属性

7.3 Ext.Window的常用属性 2 7.3.1 创建窗口--Ext.Window 3   var win = new Ext.Window({ 4     layout:'fit',       //弹出窗口内布局会充满整个窗口; 5     width:500,          //设置窗口大小; 6     height:300, 7     closeAction:'hide', //点击右上角关闭按钮后会执行的操作; 8     closable:false,     //隐藏关闭按钮; 9     draggable:true,     //窗口可拖动;10     items:[{}],         //默认会生成Ext.Panel类型的对象;并且随窗口大小改变而改变;11     buttons:[{12       text:'按钮'13     }]14   });15   win.show();16   //closeAction:'hide':关闭窗口时执行隐藏命令,之后还可以使用show()函数显示刚刚关闭的窗口;17   //closeAction:'close':关闭窗口时把窗口对象销毁;不能再执行show()了;18 19 7.3.1 窗口的最大化和最小化20   var win = new Ext.Window({21     ..22     minimizable:true,   //窗口最小化按钮; 需重写minimize()函数;23     maximizable:true    //窗口最大化按钮;24   });25 26 7.3.3 窗口的隐藏与销毁27   >1.closeAction:'close'28     //关闭窗口时,Ext会将窗口对象和其对应的DOM模型完全销毁,销毁之后的窗口无法通过调用show()函数显示到页面上;29   >2.closeAction:'hide'30     //关闭窗口时,自动隐藏,之后可以通过show()显示出来;31   >3.Ext.Window.hide()/.show()32     //调用自定义函数替代closable;33   >4.closable:false     //隐藏关闭按钮;34 35 7.3.4 防止窗口超出浏览器边界36   >1.constrain:true37     //保证整个窗口不会越过浏览器的边界;38   >2.constrainHeader:true39     //值保证窗口的顶部不会越过浏览器的边界;40 41 7.3.5 设置窗口中的按钮42   //通过buttons参数指定窗口下部的按钮43   var win = new Ext.Window({44     ...45     defaultButton:0,      //默认第一个按钮为选中状态,Enter键即可提交;46     buttons:[{47       text:'确定',48       handler:function(){ //点击后隐藏窗口;49         win.hide();50       }51     },{52       text:'取消'53     }]54   });55   win.show();56 57 7.3.6 窗口的其他配置选项58   //通过resizable:控制窗口是否可以通过拖放改变大小;59   //通过resizeHandles:设置可拖拽的角度控制点;60   var win = new Ext.Window({61     width:300,62     height:100,63     closeAction:'hide',64     resizable:true,         //窗口可拖动改变大小;65     resizeHandles:'se',     //south-east:右下角可拖动;66     modal:true,             //设置弹窗之后屏蔽掉页面上所有的其他组件;67     animateTarget:'target', //Ext弹窗从指定的HTML元素弹出或关闭窗口动画;68     plain:true              //使窗体主体更融于框架颜色;69   });70   Ext.get('target').on('click',function(){71     win.show();72   })73   <button id="target">target</button>

 

7.4 窗口分组

7.4 窗口分组 2   //在Ext中,窗口是分组进行管理的,可以对某一组中的窗口执行特定的操作; 3   //窗口都在Ext.WindowMgr组中;窗口分组由Ext.WindowGroup类定义; 4   var i = 0; 5   function newWin() {         //自定义创建窗口函数; 6     var id=i++; 7     var win=new Ext.Window({  //创建窗口; 8       headerPosition:'top',   //窗口标题的方位; 9       title:'窗口'+id,10       width:400,11       height:300,12       maximizable:true        //窗口最大化;13     });14     win.show();15   };16   function toBack() {         //窗口层最后;17     Ext.WindowManager.sendToBack(Ext.windowManager.getActive());18     //WindowManager:窗口组;19     //getActive():当前最顶层窗口;20   };21   function hideAll() {        //隐藏所有窗口;22     Ext.WindowManager.hideAll();23   };24   Ext.onReady(function(){25     Ext.get('btn').on('click',newWin);    //点击按钮触发函数;26     Ext.get('btnToBack').on('click',toBack);27     Ext.get('btnHide').on('click',hideAll);28   });

 

7.5 向窗口中放入各种控件

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码