extjs4.0.6做一個panel的demo

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>

截圖:


發佈了19 篇原創文章 · 獲贊 2 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章