快捷導(dǎo)航

Extjs學(xué)習(xí)筆記之六面版

更新時(shí)間：2010年01月08日 00:14:25 作者：

面版表示頁(yè)面上的一塊相對(duì)獨(dú)立的區(qū)域，利用傳統(tǒng)的html+css要構(gòu)建靈活統(tǒng)一的區(qū)域并非易事。

Extjs為我們封裝好了Panel，Panel具有統(tǒng)一的標(biāo)題頭，面板體，面板底部，還可以自由的添加工具欄等。另外，extjs中還有豐富的布局，可以用來布局Panel。這種方式很像Java的Swing. Panel可以嵌套，可以作為整個(gè)頁(yè)面的框架，也可以作為一個(gè)小功能區(qū)。前幾篇文中用到的FormPanel就是繼承自Panel類的。

下面的例子展示了一個(gè)較為完整的Panel,主要是設(shè)置工具欄：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Extjs Combobox</title> 
<link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ext-3.1.0/ext-all.js"></script> 
<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function() { 
new Ext.Panel({ 
title: 'Panel Header', 
tbar: ['Top Toolbar', { 
// xtype: 'button', // default for Toolbars, same as 'tbbutton' 
text: 'Button' 
}, 
{ 
xtype: 'splitbutton', // same as 'tbsplitbutton' 
text: 'Split Button' 
}, // begin using the right-justified button container 
'->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill 
{ 
xtype: 'textfield', 
name: 'field1', 
emptyText: 'enter search term' 
}, 
// add a vertical separator bar between toolbar items 
'-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator 
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem 
{xtype: 'tbspacer' }, // same as ' ' to create Ext.Toolbar.Spacer 
'text 2', 
{ xtype: 'tbspacer', width: 50 }, // add a 50px space 
'text 3'], 
bbar: ['Bottom Toolbar'], 
applyTo: 'mypanel', 
frame: true, 
html: '<div>Here is the body of the Panel</div>', 
bodyStyle: 'background-color:#FFFFFF', 
height: 300, 
width: 600, 
collapsible: true, 
tools: [{ id: 'toggle' }, { id: 'close' }, { id: 'maximize'}], 
buttons: [new Ext.Button({ text: 'Click Me' })] 
}); 
}); 
</script> 
</head> 
<body> 
<div id="mypanel"></div> 
</body> 
</html> 

效果如下：

下面介紹如何給面板加載內(nèi)容。其實(shí)上面的例子已經(jīng)展示了一種方法，那就是通過html屬性直接指定，不過這種方法似乎沒有太大的實(shí)用價(jià)值。Panel具有一個(gè)autoLoad屬性，可以加載遠(yuǎn)程頁(yè)面。新建一個(gè)頁(yè)面RemoteContent.htm,內(nèi)容如下：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<ul> 
<li>List Item 1</li> 
<li>List Item 2</li> 
<li>List Item 3</li> 
<li>List Item 4</li> 
<li>List Item 5</li> 
</ul> 
</body> 
</html> 

將上例的html配置項(xiàng)去掉，換成：
autoLoad:'RemoteContent.htm'則效果為：

autoLoad配置項(xiàng)會(huì)把<body></body>之間的內(nèi)容加載進(jìn)來。要注意，加載的文件中不能含有,否則不能正常加載。另外要注意，用這種方法直接加載aspx頁(yè)面往往不能成功。例如，新建一個(gè)Default.aspx頁(yè)面，內(nèi)容為：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> 
</div> 
</form> 
</body> 
</html> 

按鈕事件為：

Label1.Text = "Hello Asp.net With Extjs.";

把a(bǔ)utoLoad配置為Default.aspx頁(yè)面，點(diǎn)擊下按鈕，就會(huì)發(fā)現(xiàn)整個(gè)Panel都沒了，就剩下aspx頁(yè)面上的內(nèi)容。因此autoLoad適合加載htm文件，或者是通過ashx頁(yè)面輸出的html代碼，這些輸出的代碼都由我們自己嚴(yán)格控制，而用默認(rèn)的aspx的回發(fā)頁(yè)面肯定是不行的。要直接將extjs和asp.net的服務(wù)器控件組合起來用也是不太可能的。如果非要偷個(gè)懶，可以用這樣的方法：

html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'default.aspx'+'"> </iframe>'這樣就可以了。
Panel還具有一個(gè)ContentEl屬性，可以加載本頁(yè)面上的dom節(jié)點(diǎn)。這種方法也能和asp.net服務(wù)器控件結(jié)合使用，對(duì)Default.aspx稍加修改：

復(fù)制代碼代碼如下:

 
<body> 
<formid="form1"runat="server"> 
<divid="panelcontent"> 
<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label> 
<asp:ButtonID="Button1"runat="server"Text="Button"onclick="Button1_Click" /> 
</div> 
<div>Here is some fixed Content</div> 
<divid="panel"></div> 
</form> 
</body> 

head部分的腳本和上面的例子一致，只是把html和autoLoad屬性都去掉，換成：
contentEl: 'panelcontent'表示這個(gè)panel要加載id為panelcontent的div中的內(nèi)容，也就是一個(gè)Label和一個(gè)button。效果如下：

可以看到contentEl的效果，它是把原來在
<div>Here is some fixed Content</div>
之上的內(nèi)容移動(dòng)到Panel的內(nèi)部。這個(gè)時(shí)候點(diǎn)擊button，能夠正確響應(yīng)服務(wù)器端的代碼。這種方式僅僅是在頁(yè)面上移動(dòng)一些DOM節(jié)點(diǎn)的位置，一般來說對(duì)服務(wù)器端事件不會(huì)造成什么影響，但是這樣Panel的作用和div也相差不大了。
最后介紹通過items配置項(xiàng)向Panel內(nèi)添加其他Extjs組件的方法。Panel內(nèi)除了直接添加html之外還可以添加其他的組件，Panel本身也是組件，所以Panel是可以嵌套的。嵌套的Panel結(jié)合下一節(jié)要介紹的布局可以方便的完成一些布局工作。
新建一個(gè)nestedPanel.htm,代碼如下，通過items配置Panel內(nèi)部的內(nèi)容：

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Extjs Nest Panel</title> 
<link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ext-3.1.0/ext-all.js"></script> 
<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function() { 
new Ext.Panel({ 
title: 'Panel Header', 
renderTo: 'panel1', 
frame: true, 
bodyStyle: 'background-color:#FFFFFF', 
collapsible: true, 
items: new Ext.DatePicker(), 
width: 189 
}); 
new Ext.Panel({ 
title: 'Nested Panel', 
renderTo: 'panel2', 
width: 189, 
frame: true, 
items: [{ xtype: 'panel', title: 'nested 1',html:'<div>I am panel A</div>' }, 
{ xtype: 'panel', title: 'nested 2', autoLoad:'RemoteContent.htm'}] 
}); 
}); 
</script> 
</head> 
<body> 
<div id="panel1"></div> 
<div id="panel2"></div> 
</body> 
</html> 