|
|
下面的例子展示了一個(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)展示了一種方法，那就是通過(guò)html屬性直接指定，不過(guò)這種方法似乎沒(méi)有太大的實(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)來(lái)。要注意，加載的文件中不能含有<!-- -->,否則不能正常加載。另外要注意，用這種方法直接加載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都沒(méi)了，就剩下ASPx頁(yè)面上的內(nèi)容。因此autoLoad適合加載htm文件，或者是通過(guò)ashx頁(yè)面輸出的html代碼，這些輸出的代碼都由我們自己嚴(yán)格控制，而用默認(rèn)的ASPx的回發(fā)頁(yè)面肯定是不行的。要直接將extjs和ASP.NET的服務(wù)器控件組合起來(lái)用也是不太可能的。如果非要偷個(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的效果，它是把原來(lái)在
<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)的位置，一般來(lái)說(shuō)對(duì)服務(wù)器端事件不會(huì)造成什么影響，但是這樣Panel的作用和div也相差不大了。
最后介紹通過(guò)items配置項(xiàng)向Panel內(nèi)添加其他Extjs組件的方法。Panel內(nèi)除了直接添加html之外還可以添加其他的組件，Panel本身也是組件，所以Panel是可以嵌套的。嵌套的Panel結(jié)合下一節(jié)要介紹的布局可以方便的完成一些布局工作。
新建一個(gè)nestedPanel.htm,代碼如下，通過(guò)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>
效果如下：
JavaScript技術(shù)：Extjs學(xué)習(xí)筆記之六 面版，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
