ExtJS4学习札记五－－面板使用
日期：2014-05-16 浏览次数：20492 次
ExtJS4学习笔记五－－面板使用
标准面板：
面板加载远程页面：
面板加载本地资源：
使用html配置项自定义面板内容：
使用items配置项添加单一组件示例：
标准面板：
Ext.create('Ext.panel.Panel',{
title:'面板头部（header）',
tbar : ['顶端工具栏(top toolbars)'],
bbar : ['底端工具栏(bottom toolbars)'],
height:200,
collapsible : true,
collapseDirection : 'left',
width:300,
frame:true,
renderTo: Ext.getBody(),
bodyPadding: 5,
bodyStyle:'background-color:#FFFFFF',
html:'面板体（body）',
tools : [
{id:'toggle'},
{id:'close'},
{id:'maximize'}
],
buttons:[{
text:'面板底部（footer）'
}]
});面板加载远程页面：
Ext.create('Ext.panel.Panel',{
title:'面板加载远程页面',
height:150,//设置面板的高度
width:250,//设置面板的宽度
frame:true,//渲染面板
autoScroll : true,//自动显示滚动条
collapsible : true,//允许展开和收缩
renderTo: Ext.getBody(),
bodyPadding: 5,
autoLoad :'page1.html',//自动加载面板体的默认连接
bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
});面板加载本地资源：
<HTML>
<HEAD>
<TITLE>面板加载本地资源</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'面板加载本地资源',
height:150,//设置面板的高度
width:250,//设置面板的宽度
frame:true,//渲染面板
collapsible : true,//允许展开和收缩
autoScroll : true,//自动显示滚动条
renderTo: Ext.getBody(),
bodyPadding: 5,
contentEl :'localElement',//加载本地资源
bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
});
});
</script>
</HEAD>
<BODY STYLE="margin: 10px">
<table border=1 id='localElement'>
<tr><th colspan=2>本地资源---员工列表</th></tr>
<tr>
<th width = 60>序号</th><th width = 80>姓名</th>
<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>
</BODY>
</HTML>
使用html配置项自定义面板内容：
var htmlArray = [
'<table border=1>',
'<tr><td colspan=2>员工列表</td></tr>',
'<tr><th width = 60>序号</th><th width = 80>姓名</th><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>'
];
Ext.create('Ext.panel.Panel',{
title:'使用html配置项自定义面板内容',
height:150,//设置面板的高度
width:250,//设置面板的宽度
frame:true,//渲染面板
collapsible : true,//允许展开和收缩
autoScroll : true,//自动显示滚动条
renderTo: Ext.getBody(),
bodyPadding: 5,
html:htmlArray.join(''),
bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
});使用items配置项添加单一组件示例：
Ext.create('Ext.panel.Panel',{
title:'日历',
frame:true,//渲染面板
collapsible : true,//允许展开和收缩
renderTo: Ext.getBody(),
width : 200,
bodyPadding: 5,
items
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
