Extjs學習筆記之六面版

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

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

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

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

復制代碼代碼如下:

 
<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> 

效果如下：

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

復制代碼代碼如下:

 
<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配置項去掉，換成：
autoLoad:'RemoteContent.htm'則效果為：

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

復制代碼代碼如下:

 
<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.";

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

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

復制代碼代碼如下:

 
<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'表示這個panel要加載id為panelcontent的div中的內容，也就是一個Label和一個button。效果如下：

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

復制代碼代碼如下:

 
<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> 