ExtJS基础第五讲学习--Extjs窗口组件Window

浅浅的花香味﹌ 2022-04-17 00:36 384阅读 0赞

第五讲：窗口组件Window

示例一：显示Window

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &nbsp;&nbsp;&lt;head&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Window&lt;/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="../Ext/ext-all-debug.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;script type="text/javascript" src="Window.js"&gt;&lt;/script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"&gt;&lt;/link&gt; &nbsp;&nbsp;&lt;/head&gt; &nbsp;&nbsp;&lt;body&gt; &nbsp;&nbsp;&lt;/body&gt; &lt;/html&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

resizable:false,(是否可以改变大小，默认可以)

maximizable:true,（是否增加最大化，默认没有）

draggable:false,（是否可以拖动，默认可以）

minimizable:true,（是否增加最小化，默认无）

closeAction属性用来设置关闭按钮操作，有两个可选值，一个为close，一个为hide。

如果为close，那么关闭后不能再打开，而hide可以重新打开该窗口。

示例二：打开隐藏后的窗口

控制窗口的关闭和打开。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { var&nbsp;myWindow &nbsp;= new&nbsp;Ext.Window({ width:300, height:300, title:"window", closeAction:"hide" }); myWindow.show(); &nbsp; &nbsp; var&nbsp;openWin = Ext.get("openWin"); openWin.on("click",function() { myWindow.show(); } ) &nbsp; var&nbsp;closeWin = Ext.get("closeWin"); closeWin.on("click",function() { myWindow.hide(); } ) } ); </td> 
 </tr> 
 </tbody> 
</table>

closable属性用来设置是否显示关闭按钮。

实例三：

constrain属性如果为true则强制此window控制在viewport，默认为false。  
实例四：控制窗口只能在显示在页面显示区域。

plain属性如果为true则主体背景透明，false则主体有小差别的背景色，默认为false

示例五：设置窗体主体背景透明

带头部工具栏的窗口

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { //初始化提示信息 Ext.QuickTips.init(); &nbsp; var&nbsp;myWindow &nbsp;= new&nbsp;Ext.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(); } } ] }); &nbsp; myWindow.show(); } ); </td> 
 </tr> 
 </tbody> 
</table>

自定义工具栏图片和提示信息。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { //初始化提示信息 Ext.QuickTips.init(); &nbsp; var&nbsp;myWindow &nbsp;= new&nbsp;Ext.Window({ contentEl:hello, width:300, height:300, title:"window", closable:false, //工具栏 tbar:new&nbsp;Ext.Toolbar({ height:30 }) }); myWindow.show(); &nbsp; myWindow.getTopToolbar().add(new&nbsp;Ext.Toolbar.Button({icon:"save.jpg",cls:'x-btn-icon',tooltip:"保存"})) myWindow.getTopToolbar().add(new&nbsp;Ext.Toolbar.Button({icon:"open.jpg",cls:'x-btn-icon',tooltip:"打开"})) &nbsp; } ); </td> 
 </tr> 
 </tbody> 
</table>

自定义菜单栏图片

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> Ext.onReady( function() { &nbsp; var&nbsp;myWindow &nbsp;= new&nbsp;Ext.Window({ contentEl:hello, width:300, height:300, title:"window", closable:false, //工具栏 tbar:new&nbsp;Ext.Toolbar({ height:30 }) }); myWindow.show(); &nbsp; var&nbsp;mymenu = new&nbsp;Ext.menu.Menu({ items:[ {text:"打开",icon:"open.jpg"}, {text:"保存",icon:"save.jpg"} ] }); &nbsp; myWindow.getTopToolbar().add(new&nbsp;Ext.Toolbar.SplitButton({text:"文件",menu:mymenu})); } ); </td> 
 </tr> 
 </tbody> 
</table>

窗口分组。

窗口是可以分组进行管理的，默认情况下的窗口都在默认的组 Ext.WindowMgr中。窗口分组由类Ext.WindowGroup定义，该类包括bringToFront、getActive、 hideAll、sendToBack等方法用来对分组中的窗口进行操作。

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> var&nbsp;i = 1; var&nbsp;mygroup; function&nbsp;newWindow() { var&nbsp;myWindow &nbsp;= new&nbsp;Ext.Window({ width:300, height:300, title:"window"&nbsp;+ i++, closable:false, manager:mygroup }); myWindow.show(); } &nbsp; function&nbsp;toBack() { mygroup.sendToBack(mygroup.getActive()); } &nbsp; function&nbsp;hideAll() { mygroup.hideAll(); } &nbsp; Ext.onReady( function() { mygroup=new&nbsp;Ext.WindowGroup(); Ext.get("newWin").on("click",newWindow); Ext.get("toback").on("click",toBack); Ext.get("hideAll").on("click",hideAll); } ); &nbsp; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>