深入浅出ExtJS 弹出窗口
2018-08-20 22:33
204 查看
一、 Ext.MessageBox
1 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 //回调函数参数二:用户输入的字符;
二、 对话框的更多配置--show()
1 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.Msg
60 //Ext.Msg弹出的对话框都是基于同一个内部Ext.Window实例;因此不能同时使用Ext.MessageBox弹出多个对话框;页面只会显示最后一个窗口;
三、 Ext.Window的常用属性
1 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:true
37 //保证整个窗口不会越过浏览器的边界;
38 >2.constrainHeader:true
39 //值保证窗口的顶部不会越过浏览器的边界;
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>
四、 窗口分组
1 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 });
五、 向窗口中放入各种控件
1 7.5 向窗口中放入各种控件
2 //窗口(window)继承自Ext.Panel;支持在内部嵌套其他组件;
3 7.5.1 在窗口中加入表格
4 //创建表格后不必render(),而是直接加入窗口的items参数中;
5 //窗口会在显示时自动渲染内部的组件;
6 var columns = [...];
7 var data = [...];
8 var store = new Ext.data.ArrayStore({...});
9 store.load();
10 var grid = new Ext.grid.GridPanel({
11 store:store,
12 columns:columns,
13 layout:'fit'
14 });
15 //表格初始化↑↑↑↑;并且没有进行render();
16 var win = new Ext.Window({
17 layout:'fit',
18 width:500,
19 height:300,
20 closeAction:'hide',
21 items:[grid], //在弹窗中嵌套表格;
22 buttons:[{text:'按钮'}]
23 });
24
25 7.5.2 在窗口中加入表单
26 //在form中去掉title参数;在window里设置;
27 //没有设置form的宽和高,它会根据外部窗口的大小;
28 var form = new Ext.form.FormPanel({
29 defaultType:'textfield',
30 items:[{
31 fieldLabel:'文本',
32 name:'text'
33 },{
34 fieldLabel:'日期',
35 name:'data',
36 xtype:'datafield'
37 }]
38 });
39 var win = new Ext.Window({
40 layout:'fit',
41 title:'嵌套表单',
42 items:[form], //嵌入表单;
43 buttons:[{text:'按钮'}]
44 });
45 win.show();
46
47 7.5.3 复杂布局
48 //左侧可折叠nav,中间是Tab页;
49 var tabs = new Ext.TabPanel({
50 region:'center', //BorderLayout布局的中间;
51 margins:'3 3 3 0',
52 activeTab:0,
53 defaults:{autoScroll:true},
54 items:[{
55 title:'默认',
56 html:'tab1'
57 },{
58 title:'可关闭标签',
59 html:'tab2',
60 closable:true
61 }]
62 });
63 var nav = new Ext.Panel({
64 title:'可折叠导航',
65 region:'west', //BorderLayout布局的左侧;
66 split:true,
67 collapsible:true,
68 margins:'3 0 3 3',
69 cmargins:'3 3 3 3'
70 });
71 var win = new Ext.Window({
72 title:'窗口嵌套可折叠和Tabs',
73 layout:'border', //为窗口指定BorderLayout布局;
74 closable:true,
75 width:600,
76 height:350,
77 border:false,
78 items:[nav,tabs] //引入nav和tabs;
79 });
80 win.show();
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 深入浅出ExtJS 第七章 弹出窗口
- 深入浅出ExtJS 第七章 弹出窗口
- 深入浅出ExtJS 第七章 弹出窗口
- extjs_04_grid(弹出窗口&行编辑器 CRUD数据)
- EXTJS桌面显示窗口（左边:TREE，右边：PANEL），点击按钮弹出窗口编辑数据提交后台PHP。
- extjs中弹出新窗口,如何使旧页面不可编辑
- EXTJS弹出窗口中文本输出错误信息
- ExtJS4 Ext.create弹出新窗口
- [小细节]关于ExtJS中树节点事件弹出窗口置底问题
- ExtJs框架开发的弹出窗口问题
- ExtJs 4.2.1 点击按钮弹出表单的窗口
- ExtJs 查看图片 弹出窗口
- ExtJS的使用方法汇总4——拖放以及弹出窗口
- Extjs-弹出窗口 Ext.MessageBox
- ExtJS的使用方法汇总4——拖放以及弹出窗口
- EXTJS6.2 使用弹出确认框窗口Ext.Msg.show
- Extjs-弹出窗口 Ext.Window
- ExtJS的使用方法汇总(4)——拖放以及弹出窗口
- Extjs 4.2 关闭浏览器不弹出提示窗口
- ExtJS前端框架EXT弹出窗口事件