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>
截图: