05第五讲窗口组件Window

示例一：显示Window!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==text/javascriptsrc=../Ext/adapter/ext/ext-base.js/scriptscripttype=text/javascriptsrc=../Ext/ext-all-debug.js/scriptscripttype=text/javascriptsrc=Window.js/scriptlinkrel=stylesheettype=text/csshref=../Ext/resources/css/ext-all.css/link/headbody/body/htmlExt.onReady(function(){newExt.Window({width:300,height:300,title:window}).show();});resizable:false,(是否可以改变大小，默认可以)maximizable:true,（是否增加最大化，默认没有）draggable:false,（是否可以拖动，默认可以）minimizable:true,（是否增加最小化，默认无）closeAction属性用来设置关闭按钮操作，有两个可选值，一个为close，一个为hide。如果为close，那么关闭后不能再打开，而hide可以重新打开该窗口。示例二：打开隐藏后的窗口Ext.onReady(function(){varmyWindow=newExt.Window({width:300,height:300,title:window,closeAction:hide});myWindow.show();Ext.get(showWindow).on(click,function(){myWindow.show();})});控制窗口的关闭和打开。Ext.onReady(function(){varmyWindow=newExt.Window({width:300,height:300,title:window,closeAction:hide});myWindow.show();varopenWin=Ext.get(openWin);openWin.on(click,function(){myWindow.show();})varcloseWin=Ext.get(closeWin);closeWin.on(click,function(){myWindow.hide();})});closable属性用来设置是否显示关闭按钮。实例三：Ext.onReady(function(){varmyWindow=newExt.Window({contentEl:hello,width:300,height:300,title:window,closable:false});myWindow.show();});constrain属性如果为true则强制此window控制在viewport，默认为false。实例四：控制窗口只能在显示在页面显示区域。Ext.onReady(function(){varmyWindow=newExt.Window({contentEl:hello,width:300,height:300,title:window,closable:false,constrain:true});myWindow.show();});plain属性如果为true则主体背景透明，false则主体有小差别的背景色，默认为false示例五：设置窗体主体背景透明Ext.onReady(function(){varmyWindow=newExt.Window({contentEl:hello,width:300,height:300,title:window,closable:false,constrain:true,plain:true});myWindow.show();});带头部工具栏的窗口Ext.onReady(function(){//初始化提示信息Ext.QuickTips.init();varmyWindow=newExt.Window({contentEl:hello,width:300,height:300,title:window,closable:false,//头部工具栏tools:[{id:save,qtip:保存},{id:help,qtip:帮助},{id:close,qtip:关闭,handler:function(){//myWindow.close();myWindow.hide();}}]});myWindow.show();});自定义工具栏图片和提示信息。Ext.onReady(function(){//初始化提示信息Ext.QuickTips.init();varmyWindow=newExt.Window({contentEl:hello,width:300,height:300,title:window,closable:false,//工具栏tbar:newExt.Toolbar({height:30})});myWindow.show();myWindow.getTopToolbar().add(newExt.Toolbar.Button({icon:save.jpg,cls:'x-btn-icon',tooltip:保存}))myWindow.getTopToolbar().add(newExt.Toolbar.Button({icon:open.jpg,cls:'x-btn-icon',tooltip:打开}))});自定义菜单栏图片Ext.onReady(function(){varmyWindow=newExt.Window({contentEl:hello,width:300,height:300,title:window,closable:false,//工具栏tbar:newExt.Toolbar({height:30})一、头部工具栏。准备工作，创建一个Panel，代码如下。Ext.onReady(function(){varmypanel=newExt.Panel({renderTo:hello,width:300,height:300,title:Panel,html:测试Panel,floating:true,x:300,y:100});});添加头部工具栏和提示信息，代码如下。Ext.onReady(function(){//初始化提示信息Ext.QuickTips.init();varmypanel=newExt.Panel({renderTo:hello,width:300,height:300,title:Panel,html:测试Panel,floating:true,x:300,y:100,//工具栏tools:[{id:save,qtip:保存},{id:help,qtip:帮助},{id:close,qtip:关闭}]});});});myWindow.show();varmymenu=newExt.menu.Menu({窗口分组。窗口是可以分组进行管理的，默认情况下的窗口都在默认的组Ext.WindowMgr中。窗口分组由类Ext.WindowGroup定义，该类包括bringToFront、getActive、hideAll、sendToBack等方法用来对分组中的窗口进行操作。vari=1;varmygroup;functionnewWindow(){varmyWindow=newExt.Window({width:300,height:300,title:window+i++,closable:false,manager:mygroup});myWindow.show();}functiontoBack(){mygroup.sendToBack(mygroup.getActive());}functionhideAll(){mygroup.hideAll();}Ext.onReady(function(){mygroup=newExt.WindowGroup();Ext.get(newWin).on(click,newWindow);Ext.get(toback).on(click,toBack);Ext.get(hideAll).on(click,hideAll);});