extjs4.0.6做一个panel的demo -

it_iweb

浏览: 9488 次
性别:
来自: 天津

最近访客更多访客>>

wangtong1976

wuzuyu365

wggfxn

葉孤橙

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (18)

社区版块

存档分类

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>

截图:

分享到：