|
|
下面的例子展示了一個較為完整的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>
效果如下：
下面介紹如何給面板加載內容。其實上面的例子已經展示了一種方法，那就是通過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頁面，點擊下按鈕，就會發現整個Panel都沒了，就剩下ASPx頁面上的內容。因此autoLoad適合加載htm文件，或者是通過ashx頁面輸出的html代碼，這些輸出的代碼都由我們自己嚴格控制，而用默認的ASPx的回發頁面肯定是不行的。要直接將extjs和ASP.NET的服務器控件組合起來用也是不太可能的。如果非要偷個懶，可以用這樣的方法：
html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'default.ASPx'+'"> </iframe>'這樣就可以了。
Panel還具有一個ContentEl屬性，可以加載本頁面上的dom節點。這種方法也能和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節點的位置，一般來說對服務器端事件不會造成什么影響，但是這樣Panel的作用和div也相差不大了。
最后介紹通過items配置項向Panel內添加其他Extjs組件的方法。Panel內除了直接添加html之外還可以添加其他的組件，Panel本身也是組件，所以Panel是可以嵌套的。嵌套的Panel結合下一節要介紹的布局可以方便的完成一些布局工作。
新建一個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>
效果如下：
JavaScript技術：Extjs學習筆記之六 面版，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
