七、Panel面板
新建一个Panel.html网页，其内容如下：
<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01//EN”>
<html>
<head>
<meta http-equiv=”Content-Type”content=”text/html; charset=UTF-8; user-scalable=no”>
<title>Panel面板</title>
<link rel=”stylesheet”type=”text/css” href=”resources/css/ext-all.css”/>
<scripttype=”text/javascript” src=”bootstrap.js”></script>
<script type=”text/javascript” src=”Panel.js”></script>
</head>
<body>
<div id=”myDiv” width=”100%”height=”100%”/>
</body>
</html>
然后新建一个Panel.js文件，在该文件中添加定义Panel代码，如下：
Ext.onReady(function(){
var myPanel = Ext.create(‘Ext.form.Panel’,{
title:’我的第一个Panel’, //标题
width:400, //宽度
height:300, //高度
closable:true,//可以关闭
collapsible:true,//可以收缩
html:’你好，欢迎使用Panel！<br/>Panel在实际应用中非常广泛’,
renderTo:myDiv //渲染至容器
});
});
Panel的属性非常明确简单，其中html用于面板中显示内容，如果需要换行则添加<br/>，其结果如下图所示：
上面的例子是添加一个Panel，如果要添加多个Panel，并且进行布局，则需要采用items属性以及layout属性，如下例子，新建三个Panel，分别为myPanel01、myPanel02和myTotalPanel，将myPanel01和myPanel02放在myTotalPanel里面，并设置myPanel01在左侧，代码如下：
Ext.onReady(function(){
//创建第一个Panel
var myPanel01 = Ext.create(‘Ext.form.Panel’,{
title:’我的第一个Panel’, //标题
width:200, //宽度
split:true,//可以收缩
region:‘west’,//在左侧，西边
collapsible:true,//可以收缩
html:’你好，欢迎使用Panel！<br/>Panel在实际应用中非常广泛’
});
//创建第二个Panel
var myPanel02 = Ext.create(‘Ext.form.Panel’, {
title:‘第二个Panel’,
region:‘center’,
autoScroll:true,
html:’你好，欢迎使用Panel2！<br/>这个是第二个Panel’
});
//创建第三个Panel，将前面两个Panel放在它里面
var myTotalPanel = Ext.create(‘Ext.form.Panel’, {
title:‘整个Panel’,
autoScroll:true,
closable:true,
collapsible:true,
items:[myPanel01,myPanel02], //将前面创建的Panel添加进来
width:600,
height:400,
layout:‘border’,//布局
renderTo:myDiv //渲染至容器
});
});
创建Panel的过程与前面例子几乎一样，只是增加了或减少了几个属性参数值的设置，由于要将myPanel01放在左侧，所以设置其region属性为west，即西边，如果要设置在右侧则为east，上边为north，下边为south，中间为center，如果需要Panel的边框可以拖动，则设置split为true。由于要在myTotalPanel中添加myPanel01和myPanel02，所以在其items属性中添加这两个Panel，同时设置其layout为border。其结果如下图所示：