panel使用基礎,包括遠程頁面,本地資源的加載,使用html配置自定義面板內容及組件,工具欄等的使用,代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>面板加載遠程頁面及組件使用</title>
<link rel="stylesheet" type="text/css" href="extjs4.0.7/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs4.0.7/bootstrap.js"></script>
<script type="text/javascript" src="extjs4.0.7/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// 用於測試自定義面板時使用的數組
var htmlArray = [
'<table border=1>',
'<tr><td colspan=2>2015年-旅遊規劃</td></tr>',
'<tr><td width:60>月份</td><td width:60>景區</td></tr>',
'<tr><td>2月</td><td>a</td></tr>',
'<tr><td>5月</td><td>b</td></tr>',
'<tr><td>6月</td><td>c</td></tr>',
'<tr><td>8月</td><td>d</td></tr>',
'<tr><td>9月</td><td>e</td></tr>',
'<tr><td>10月</td><td>f</td></tr>',
'<tr><td>11月</td><td>g</td></tr>',
'<tr><td>12月</td><td>h</td></tr>',
'</table>'
];
Ext.create('Ext.panel.Panel',{
title:'面板加載遠程頁面及面板組件,工具欄',
tbar:['頂部工具欄'],
bbar:['底部工具欄'],
height:650,
width:800,
frame:true,
renderTo:Ext.getBody(),
autoScroll:true,//自動顯示滾動條
collapsible:true,//允許展開和收縮
bodyPadding:5,
layout:'vbox',
defaults:{//設置默認屬性
bodyStyle:'background-color:#FFFFFF',//設置面板體的背景顏色,
collapsible:true,//允許展開和收縮
width:785,
autoScroll:true//自動顯示滾動條
},
items:[{
title:'加載遠程頁面',
autoLoad:'pagel.html',
height:100
},{
title:'加載本地資源',
contentEl:'localElement',
height:100
},{
title:'使用html配置自定義面板內容',
html:htmlArray.join(""),//調用數組的join方法將數組內容連接爲整體供程序使用
height:100
},{
title:'日曆選擇卡',
xtype:'datepicker',
minDate:new Date()
}],
tools:[
{id:'toggle'},
{id:'close'},
{id:'maximize'},
{id:'minimize'},
{id:'restore'},
{id:'up'},
{id:'down'},
{id:'refresh'},
{id:'right'},
{id:'left'},
{id:'next'}
],
buttons:[
{text:'提交'}
]
});
});
</script>
<table border="1" id="localElement">
<tr<td colspan="2">本地資源-員工列表</td>
</tr>
<tr>
<td width="60">序號</td>
<td width="60">姓名</td>
</tr>
<tr>
<td>1</td>
<td>張三</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
</tr>
<tr>
<td>4</td>
<td>趙六</td>
</tr>
<tr>
<td>5</td>
<td>陳七</td>
</tr>
<tr>
<td>6</td>
<td>楊八</td>
</tr>
<tr>
<td>7</td>
<td>劉九</td>
</tr>
</table>
</head>
<body>
</body>
</html>截圖:
