面板Panel

面板Panel 是ExtJS 控件的基礎(chǔ)，很高級控件都是在面板的基礎(chǔ)上擴(kuò)展的，還有其它大多數(shù)控件也都直接或間接有關(guān)系。應(yīng)用程序的界面一般情況下是由一個(gè)一個(gè)的面板通過不同組織方式形成。

面板由以下幾個(gè)部分組成，一個(gè)頂部工具欄、一個(gè)底部工具欄、面板頭部、面板尾部、面板主區(qū)域幾個(gè)部分組件。面板類中還內(nèi)置了面板展開、關(guān)閉等功能，并提供一系列可重用的工具按鈕使得我們可以輕松實(shí)現(xiàn)自定義的行為，面板可以放入其它任何容器中，面板本身是一個(gè)容器，它里面又可以包含各種其它組件。

Ext.onReady(function(){

new Ext.Panel({

renderTo:"hello",

title:"面板頭部header",

width:300,

height:200,

html:'<h1>面板主區(qū)域</h1>',

tbar:[{text:'頂部工具欄topToolbar'}],

bbar:[{text:'底部工具欄bottomToolbar'}],

buttons:[{text:"按鈕位于footer"}]

});

});

運(yùn)行該代碼，可以得到如圖所示的輸出結(jié)果，清楚的表示出了面板的各個(gè)組成部分。

??

一般情況下，頂部工具欄或底部工具欄只需要一個(gè)，而面板中一般也很少直接包含按鈕，一般會(huì)把面板上的按鈕直接放到工具欄上面。比如下面的代碼：

Ext.onReady(function(){

new Ext.Panel({

renderTo:"hello",

title:"hello",

width:300,

height:200,

html:'<h1>Hello,easyjf open source!</h1>',

tbar:[{pressed:true,text:'刷新'}]

});

});

可以得到如圖所示的效果，該面板包含面板Header，一個(gè)頂部工具欄及面板區(qū)域三個(gè)部分。

??

面板中可以有工具欄，工具欄可以位于面板頂部或底部，Ext 中工具欄是由Ext.Toolbar類表示。工具欄上可以存放按鈕、文本、分隔符等內(nèi)容。面板對象中內(nèi)置了很多實(shí)用的工具欄，可以直接通過面板的tools 配置選項(xiàng)往面板頭部加入預(yù)定義的工具欄選項(xiàng)。比如下面的代碼：

Ext.onReady(function(){

new Ext.Panel({

renderTo:"hello",

title:"hello",

width:300,

height:200,

html:'<h1>Hello,easyjf open source!</h1>',

tools:[{id:"save"},

{id:"help",?handler:function(){Ext.Msg.alert('help','please help me!');}

},{id:"close"}],

tbar:[{pressed:true,text:'刷新'}]

});

})

??

點(diǎn)擊help按鈕會(huì)執(zhí)行handler中的函數(shù)，顯示一個(gè)彈出對話框，而點(diǎn)擊其它的按鈕不會(huì)有任何行為產(chǎn)生，因?yàn)闆]有定義他們的handler。

除了在面板頭部加入這些已經(jīng)定義好的工具欄選擇按鈕以外，還可以在頂部或底工具欄中加入各種工具欄選項(xiàng)。這些工具欄選項(xiàng)主要包括按鈕、文本、空白、填充條、分隔符等。

代碼：

Ext.onReady(function(){

new Ext.Panel({

renderTo:"hello",

title:"hello",

width:300,

height:200,

html:'<h1>Hello,easyjf open source!</h1>',

tbar:[new Ext.Toolbar.TextItem('工具欄:'),

{xtype:"tbfill"},

{pressed:true,text:'添加'},

{xtype:"tbseparator"},

{pressed:true,text:'保存'}

]

});

});

??

Ext中的工具欄項(xiàng)目主要包含下面的類：

Ext.Toolbar.Button－按鈕，xtype為tbbutton

TextItem－

Ext.Toolbar.Fill－

Separator－

Spacer－

SplitButton－

為了顯示一個(gè)面板，我們需要在頁面上添加一個(gè)，然后把Ext 控件渲染到這個(gè)div 上。VeiwPort?代表整個(gè)瀏覽器顯示區(qū)域，該對象渲染到頁面的body?區(qū)域，并會(huì)隨著瀏覽器顯示區(qū)域的大小自動(dòng)改變，一個(gè)頁面中只能有一個(gè)ViewPort?實(shí)例。看下面的代碼：

Ext.onReady(function(){

new Ext.Viewport({

enableTabScroll:true,

layout:"fit",

items:[{title:"面板",

html:"",

bbar:[{text:"按鈕1"},

{text:"按鈕2"}]

}]

});

});

?

Viewport?不需要再指定renderTo，而我們也看到Viewport?確實(shí)填充了整個(gè)瀏覽器顯示區(qū)域，并會(huì)隨著瀏覽器顯示區(qū)域大小的改變而改變。

Viewport?主要用于應(yīng)用程序的主界面，可以通過使用不同的布局來搭建出不同風(fēng)格的應(yīng)用程序主界面。在Viewport?上常用的布局有fit、border?等，當(dāng)然在需要的時(shí)候其它布局也會(huì)常用。看下面的代碼：

Ext.onReady(function(){

new Ext.Viewport({

enableTabScroll:true,

layout:"border",

items:[{title:"面板",

region:"north",

height:50,

html:"<h1>網(wǎng)站后臺(tái)管理系統(tǒng)!</h1>"

},

{title:"菜單",

region:"west",

width:200,

collapsible:true,

html:"菜單欄"

},

{

xtype:"tabpanel",

region:"center", items:[{title:"面板1"},

{title:"面板2"}]

}

]

});

});

?

窗口Ext.Window

ExtJS?中窗口是由Ext.Window?類定義，該類繼承自Panel，因此窗口其實(shí)是一種特殊的面板Panel。窗口包含了浮動(dòng)、可拖動(dòng)、可關(guān)閉、最大化、最小化等特性。看下面的代碼：

var i=0;

function newWin()

{

var win=new Ext.Window({title:"窗口"+i++,

width:400,

height:300,

maximizable:true});

win.show();

}

Ext.onReady(function(){

Ext.get("btn").on("click",newWin);

});

頁面中的html 內(nèi)容：

<input id="btn" type="button" name="add" value="新窗口" />

執(zhí)行上面的代碼，當(dāng)點(diǎn)擊按鈕”新窗口”的時(shí)候，會(huì)在頁面中顯示一個(gè)窗口，窗口標(biāo)題為“窗口x”，窗口可以關(guān)閉，可以最大化，點(diǎn)擊最大化按鈕會(huì)最大化窗口，最大化的窗口可以還原

窗口是分組進(jìn)行管理的，可以對一組窗口進(jìn)行操作，默認(rèn)情況下的窗口都在默認(rèn)的組Ext.WindowMgr 中。窗口分組由類Ext.WindowGroup 定義，該類包括bringToFront、getActive、hideAll、sendToBack 等方法用來對分組中的窗口進(jìn)行操作。

var i=0,mygroup;

function newWin()

{

var win=new Ext.Window({title:"窗口"+i++,

width:400,

height:300,

maximizable:true,

manager:mygroup});

win.show();

}

function toBack()

{

mygroup.sendToBack(mygroup.getActive());

}function hideAll()

{

mygroup.hideAll();

}

Ext.oReay(function(){

mygroup=new Ext.WindowGroup();

Ext.get("btn").on("click",newWin);

Ext.get("btnToBack").on("click",toBack);

Ext.get("btnHide").on("click",hideAll);

});

頁面中的html 代碼

<input id="btn" type="button" name="add" value="新窗口" />

<input id="btnToBack" type="button" name="add" value="放到后臺(tái)" />

<input id="btnHide" type="button" name="add" value="隱藏所有" />

執(zhí)行上面的代碼，先點(diǎn)擊幾次”新窗口”按鈕，可以在頁面中顯示幾個(gè)容器，然后拖動(dòng)這些窗口，讓他們在屏幕中不同的位置。然后點(diǎn)”放到后臺(tái)”按鈕，可以實(shí)現(xiàn)把最前面的窗口移動(dòng)該組窗口的最后面去，點(diǎn)擊”隱藏所有”按鈕，可以隱藏當(dāng)前打開的所有窗口。

?

由于傳統(tǒng)使用alert、confirm?等方法產(chǎn)生的對話框非常古板，不好看。因此，ExtJS?提供了一套非常漂亮的對話框，可以使用這些對話框代替?zhèn)鹘y(tǒng)的alert、confirm?等，實(shí)現(xiàn)華麗的應(yīng)用程序界面。

Ext 的對話框都封裝在Ext.MessageBox 類，該類還有一個(gè)簡寫形式即Ext.Msg，可以直接通過Ext.MessageBox 或Ext.Msg 來直接調(diào)用相應(yīng)的對話框方法來顯示Ext 對話框?？聪旅娴拇a：

Ext.onReady(function(){

Ext.get("btnAlert").on("click",function(){

Ext.MessageBox.alert("請注意","這是ExtJS的提示框");

});

});

Html 頁面中的內(nèi)容：

<input id="btnAlert" type="button" value="alert框" />

除了alert?以外，Ext?還包含confirm、prompt、progress、wait?等對話框，另外我們可以根據(jù)需要顯示自下定義的對話框。普通對話框一般包括四個(gè)參數(shù)，比如confirm 的方法簽名為confirm ( String title, String msg, [Function fn], [Object scope] ) ，參數(shù)title?表示對話框的標(biāo)題，參數(shù)msg?表示對話框中的提示信息，這兩個(gè)參數(shù)是必須的；可選的參數(shù)fn?表示當(dāng)關(guān)閉對話框后執(zhí)行的回調(diào)函數(shù)，參數(shù)scope?表示回調(diào)函數(shù)的執(zhí)行作用域。回調(diào)函數(shù)可以包含兩個(gè)參數(shù)，即button 與text,button 表示點(diǎn)擊的按鈕，text 表示對話框中有活動(dòng)輸入選項(xiàng)時(shí)輸入的文本內(nèi)容。我們可以在回調(diào)函數(shù)中通過button 參數(shù)來判斷用戶作了什么什么選擇，可以通過text 來讀取在對話框中輸入的內(nèi)容?？聪旅娴睦樱?/p>

Ext.onReady(function(){

Ext.get("btn").on("click",function(){

Ext.MessageBox.confirm("請確認(rèn)","是否真的要?jiǎng)h除指定的內(nèi)容",function(button,text){

alert(button);

alert(text);

});

});

});

因此，在實(shí)際的應(yīng)用中，上面的代碼可以改成如下的內(nèi)容：

Ext.onReady(function(){

Ext.get("btnAlert").on("click",function(){

Ext.MessageBox.confirm("請確認(rèn)","是否真的要?jiǎng)h除指定的內(nèi)容",function(button,text){

if(button=="yes"){

//執(zhí)行刪除操作

alert("成功刪除");

}

});

});

});

這樣當(dāng)用戶點(diǎn)擊對話框中的yes 按鈕時(shí)，就會(huì)執(zhí)行相應(yīng)的操作，而選擇no 則忽略操作。

下面再看看prompt?框，我們看下面的代碼：

Ext.onReady(function(){

Ext.get("btn").on("click",function(){

Ext.MessageBox.prompt("輸入提示框","請輸入你的新年愿望:",function(button,text){

if(button=="ok"){

alert("你的新年愿望是:"+text);

}

else alert("你放棄了錄入!");

});

});

})

Html 頁面：

<input id="btn" type="button" value="對話框" />

在實(shí)際應(yīng)用中，可以直接使用MessageBox 的show 方法來顯示自定義的對話框，如下

面的代碼：

function save(button)

{

if(button=="yes")

{

//執(zhí)行數(shù)據(jù)保存操作

} else if(button=="no")

{

//不保存數(shù)據(jù)

} else

{

//取消當(dāng)前操作

}

}

Ext.onReady(function(){

Ext.get("btn").on("click",function(){

Ext.Msg.show({

title:'保存數(shù)據(jù)',

msg: '你已經(jīng)作了一些數(shù)據(jù)操作，是否要保存當(dāng)前內(nèi)容的修改？',

buttons: Ext.Msg.YESNOCANCEL,

fn: save,

icon: Ext.MessageBox.QUESTION});

});

})

點(diǎn)擊”對話框”按鈕可顯示一個(gè)自定義的保存數(shù)據(jù)對話框，對話框中包含yes、no、cancel

三個(gè)按鈕，可以在回調(diào)函數(shù)save 中根據(jù)點(diǎn)擊的按鈕執(zhí)行相應(yīng)的操作