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