7.1 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 //回调函数参数二:用户输入的字符;
7.2 对话框的更多配置--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.Msg60 //Ext.Msg弹出的对话框都是基于同一个内部Ext.Window实例;因此不能同时使用Ext.MessageBox弹出多个对话框;页面只会显示最后一个窗口;7.3 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: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 窗口分组
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 });7.5 向窗口中放入各种控件
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:true61 }]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();新闻热点
疑难解答
