ExtJS基礎第五講學習--Extjs視窗元件Window
第五講：視窗元件Window
示例一：顯示Window
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Window</title> <script type="text/javascript" <script type="text/javascript" src="../Ext/ext-all-debug.js"></script> <script type="text/javascript" src="Window.js"></script> <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"></ </head> <body> </body> </html> |
|
Ext.onReady( function() { new Ext.Window({ width:300, height:300, title:"window" }).show(); } ); |
resizable:false,(是否可以改變大小，預設可以)
maximizable:true,（是否增加最大化，預設沒有）
draggable:false,（是否可以拖動，預設可以）
minimizable:true,（是否增加最小化，預設無）
closeAction屬性用來設定關閉按鈕操作，有兩個可選值，一個為close，一個為hide。
如果為close，那麼關閉後不能再開啟，而hide可以重新開啟該視窗。
示例二：開啟隱藏後的視窗
|
Ext.onReady( function() { var myWindow = new Ext.Window({ width:300, height:300, title:"window", closeAction:"hide" }); myWindow.show(); Ext.get("showWindow").on("click",function() { myWindow.show(); } ) } ); |
控制視窗的關閉和開啟。
|
Ext.onReady( function() { var myWindow = new Ext.Window({ width:300, height:300, title:"window", closeAction:"hide" }); myWindow.show(); var openWin = Ext.get("openWin"); openWin.on("click",function() { myWindow.show(); } ) var closeWin = Ext.get("closeWin"); closeWin.on("click",function() { myWindow.hide(); } ) } ); |
closable屬性用來設定是否顯示關閉按鈕。
例項三：
|
Ext.onReady( function() { var myWindow = new Ext.Window({ contentEl:hello, width:300, height:300, title:"window", closable:false }); myWindow.show(); } ); |
constrain屬性如果為true則強制此window控制在viewport，預設為false。例項四：控制視窗只能在顯示在頁面顯示區域。
|
Ext.onReady( function() { var myWindow = new Ext.Window({ contentEl:hello, width:300, height:300, title:"window", closable:false, constrain:true }); myWindow.show(); } ); |
plain屬性如果為true則主體背景透明，false則主體有小差別的背景色，預設為false
示例五：設定窗體主體背景透明
|
Ext.onReady( function() { var myWindow = new Ext.Window({ contentEl:hello, width:300, height:300, title:"window", closable:false, constrain:true, plain:true }); myWindow.show(); } ); |
帶頭部工具欄的視窗
|
Ext.onReady( function() { //初始化提示資訊 Ext.QuickTips.init(); var myWindow = new 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(); } } ] }); myWindow.show(); } ); |
自定義工具欄圖片和提示資訊。
|
Ext.onReady( function() { //初始化提示資訊 Ext.QuickTips.init(); var myWindow = new Ext.Window({ contentEl:hello, width:300, height:300, title:"window", closable:false, //工具欄 tbar:new Ext.Toolbar({ height:30 }) }); myWindow.show(); myWindow.getTopToolbar().add(new Ext.Toolbar.Button({icon:"save.jpg",cls:'x-btn-icon',tooltip:"儲存"})) myWindow.getTopToolbar().add(new Ext.Toolbar.Button({icon:"open.jpg",cls:'x-btn-icon',tooltip:"開啟"})) } ); |
自定義選單欄圖片
|
Ext.onReady( function() { var myWindow = new Ext.Window({ contentEl:hello, width:300, height:300, title:"window", closable:false, //工具欄 tbar:new Ext.Toolbar({ height:30 }) }); myWindow.show(); var mymenu = new Ext.menu.Menu({ items:[ {text:"開啟",icon:"open.jpg"}, {text:"儲存",icon:"save.jpg"} ] }); myWindow.getTopToolbar().add(new Ext.Toolbar.SplitButton({text:"檔案",menu:mymenu})); } ); |
視窗分組。
視窗是可以分組進行管理的，預設情況下的視窗都在預設的組 Ext.WindowMgr中。視窗分組由類Ext.WindowGroup定義，該類包括bringToFront、getActive、 hideAll、sendToBack等方法用來對分組中的視窗進行操作。
|
var i = 1; var mygroup; function newWindow() { var myWindow = new Ext.Window({ width:300, height:300, title:"window" + i++, closable:false, manager:mygroup }); myWindow.show(); } function toBack() { mygroup.sendToBack(mygroup.getActive()); } function hideAll() { mygroup.hideAll(); } Ext.onReady( function() { mygroup=new Ext.WindowGroup(); Ext.get("newWin").on("click",newWindow); Ext.get("toback").on("click",toBack); Ext.get("hideAll").on("click",hideAll); } ); |