七、Panel面板

txf2004

浏览: 6866784 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

新建一个Panel.html网页，其内容如下：

<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01//EN”>

<html>

<head>

<title>Panel面板</title>

<scripttype=”text/javascript” src=”bootstrap.js”></script>

</head>

<body>

</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。其结果如下图所示：