新建一个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。其结果如下图所示:
![](https://img-my.csdn.net/uploads/201209/18/1347955686_9992.png)