引用 Ext.Panel面板  

 


使用过Delphi、Visual Basic或Java Swing等开发语言的读者对面板（Panel）一定非常熟悉，我们可以在面板随意地排版布局，它就像是一副骨架撑起了整个用户界面，在ExtJS中面板同样起着页面骨架的作用，所以学习面板是学习ExtJS页面布局的基础和起点。 ExtJS面板从使用方式上来说更接近于Java Swing中的面板，通过为其指定不同的布局方式或者进行面板嵌套达到复杂布局的目的，因此布局方式是否丰富，能否进行嵌套，是衡量ExtJS布局灵活性的重要指标。ExtJS面板共支持10种不同风格的布局样式，并且允许无限制的进行嵌套，这就给我们创造了一个尽情发挥的强大舞台。 

一、认识Ext.Panel

    Ext.Panel扩展自Ext.Container，是各种组件的容器也是基础类，可以扩展出功能更加强大的面板。作为标准的面板组件主要包括如下5部分：底部工具栏（bottom toolbars）、顶部工具栏（top toolbars）、面板头部（header）、面板底部（footer）和面板体（body），下面是一个标准面板的示例，可以帮助读者更清晰的认识面板组件。 
    代码5-1：Ext.Panel示例
    <script type="text/javascript">
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  new Ext.Panel({
   title:'面板头部（header）',
   tbar : ['顶端工具栏(top toolbars)'],
   bbar : ['底端工具栏(bottom toolbars)'],
   height:200,
   width:300,
   frame:true,
   applyTo :'panel',
   bodyStyle:'background-color:#FFFFFF',
   html:'<div>面板体（body）</div>',
   tools : [//设置面板头部功能区
    {id:'toggle'},
    {id:'close'},
    {id:'maximize'}
   ],
   buttons:[
    new Ext.Button({
     text:'面板底部（footer）'
    })
   ]
  })
 });
  </script>
    代码5-1演示了标准面板的创建方式，从图5-1中可以看到一个标准面板所具有的全部组成部分，这5部分不但位置不同功能也不尽相同，它们分别有自己存在的价值，读者可以根据业务需要选择使用其中合适的部分构成自己需要的页面。效果如图5-1所示。
Ext.Panel面板 - ht_19820316 - ht_19820316的博客

二、Ext.Panel 的主要功能
上节介绍了ExtJS面板的主要表现形式，接下来将介绍面板组件的主要配置项及常用方法，这些配置项及方法将在后面的示例中用到，可以把这部分内容作为后续章节的铺垫，进行快速的浏览，Ext.Panel主要配置项目如表5-1所示。


表5-1  Ext.Panel主要配置项目表表

 配置项

  参数类型  说明
 animCollapse  Boolean  设置面板折叠或展开时是否显示动画效果，如果 Ext.Fx 类可用则默认
为true，否则为fasle。
applyTo Mixed 一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面，而不是将其作为新组件的容器。
autoDestroy Boolean 设置是否自动销毁从容器中移除的组件，默认为true，否则要手工销毁
autoHeight Boolean 是否使用自动高度，true则使用自动高度，false则使用固定高度，默认为false
autoLoad Object/String/
Function 		设置面板自动加载的url地址。如果不为null则面板会尝试加载该url
并立刻在面板中进行渲染。这个连接将变成面板的body元素，所以可以根据需要在任何时候刷新面板内容
autoScroll Boolean 设置是否自动显示滚动条，true则设置面板的body元素样式为overflow:'auto'，内容溢出时会自动显示滚动条，false则不显示滚动条对溢出的内容进行截断。默认为false
autoShow Boolean 设置是否移除组件的隐藏样式（例如'x-hidden' or 'x-hide-display'），如果为true则在渲染时移除它们，默认为false
autoWidth Boolean 是否使用自动宽度，true为自动宽度，false为固定宽度，默认为false
baseCls String 应用于面板元素的基本样式类，默认为'x-panel'
bbar Object/Array 设置面板的底端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。
bodyBorder Boolean 设置是否显示面板体（body）的内部边框，true则显示，false则隐藏，默认为true。并且该项只在border = true时生效
bodyStyle String/Object/
Function 		应用于面板体（body）的自定义样式。默认为null
border Boolean 这是是否显示面板体（body）的边框，true则显示，false则隐藏，默认为true。默认边框宽度为2px
buttonAlign String 设置面板底部（footer）中按钮的对齐方式，有效值包括：'right', 'left' 和'center'，默认为'right' 
buttons Array 加入到面板底部（footer）中按钮配置对象的数组
collapseFirst Boolean 设置渲染展开或收缩按钮的顺序。true则在其它按钮渲染前先渲染展开或收缩按钮，false则最后渲染，默认为true。该配置项决定了展开或收缩按钮的位置。
collapsed Boolean 设置面板在第一次渲染时是否处于收缩状态，true则收缩，false则展开，默认为false
collapsible Boolean 设置是否允许面板进行展开和收缩，true则允许进行展开和收缩，并在面板头部显示伸缩按钮。默认为false
contentEl String 设置面板的内容元素，可以是页面元素的id或已存在的HTML节点
defaultType String 面板中元素的默认类型，默认为'panel'
defaults Object 应用到面板容器中所有元素的配置对象， 例如： defaults: {bodyStyle:'padding:15px'}
floating Boolean 设置面板是否可以浮动，true则允许，默认为false。注意，设置floating为true会导致面板显示在负偏移的位置，从而面板不可见，因为浮动状态下面板是采用绝对定位的，位置必须在渲染之后进行明确的设置（例如myPanel.setPosition(100,100);）.，浮动面板也需要有固定的宽度
footer Boolean 设置是否创建面板底部（footer）元素，true则创建，false则跳过footer元素的创建，如果一个或多个按钮被加入到footer中，则footer的设置会被忽略，而直接创建footer元素

frame Boolean 设置是否渲染面板，true则渲染面板为自定义的圆角边框，false则渲染为1px的直角边框
header Boolean 设置是否创建面板头部（header）元素，true则创建，false则跳过header元素的创建，如果提供了title但没有设置header则header会被自动创建。如果提供了title但明确设置header为false则header不会被创建
headerAsText Boolean 设置是否在面板的header中显示title，true则显示，默认为true
height Number 面板高度，默认为auto
hideBorders Boolean true则隐藏面板容器中所有组件的边框，false则根据组件的具体配置进行显示
hideCollapseTool Boolean 设置当collapsible为true时，是否显示展开或收缩按钮
html String/Object 设置面板（body）元素的内容为HTML片段或DomHelper生成的内容。
items Mixed 单独一个子组件或子组件的数组
layout String 面板的布局类型，默认Ext.layout.ContainerLayout布局，被选布局的配置项通过layoutConfig进行设置
layoutConfig Object 这个配置对象包含被选布局的配置项，针对每种布局的配置项需要查看相应的布局类说明
maskDisabled Boolean 设置当面板不能使用时是否遮罩面板，true则遮罩，默认为true
shadow Boolean/String 设置是否在面板后面显示阴影，true则显示，或通过字符串指定阴影的显示模式，有效值包括：sides、frame、drop，默认为'sides'。该项只在floating 为 true时生效
shadowOffset Number 设置面板阴影的偏移量，以像素为单位，默认为4。该项只在floating 为true时生效
tbar Object/Array 设置面板的顶端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。注意，面板渲染后只能通过getTopToolbar方法访问该工具栏
title String 显示在面板头部的标题信息'
titleCollapse Boolean 设置是否允许通过点击面板头部进行展开和收缩操作，true则允许，默认为false
tools Array 工具按钮配置对象的数组，这些按钮会被添加到面板头部功能区，在表5-2中会有详细的说明
width Number 面板宽度，默认为auto

    Tools 配置项主要用来设置面板头部功能区所要显示的各类按钮，每个按钮的配置对象可能包含的配置项在表5-2中说明，tools配置项id与按钮图标对应关系如表5-3所示。

表5-2  tools配置项明细表

配置项 参数类型 说明
id String 必选项，可能值及效果见表5.3
handler Function 点击按钮后触发的处理函数，参数包括： event : Ext.EventObject、toolEl : Ext.Element、Panel : Ext.Panel
scope Object 处理函数的执行范围
qtip String/Object 为按钮指定提示信息，可以是字符串或配置对象
hidden Boolean 设置初次渲染时，是否隐藏
on Object 为按钮配置事件监听器。

表5-3  tools配置项id与按钮图标对应关系表
Ext.Panel面板 - ht_19820316 - ht_19820316的博客

三、使用Ext.Panel

    本节主要介绍常用的面板使用方法，并结合示例介绍5.1.2节中常用配置项的使用及效果，以使读者有一个形象的认识。对于面板最重要的功能和作用就是在其中显示各种不同来源的内容，分为4个示例分别讲解4种不同的方式为面板提供显示内容，它们分别是： 
    使用autoLoad配置项为面板加载远程页面。 
    使用contentEl配置项为面板加载本地资源。 
    使用html配置项自定义面板内容。 
    使用items配置项在面板中添加组件。
    这4种方式可以灵活的为面板提供各种需要显示的内容，掌握它们是掌握面板使用方式的基础，在接下来的示例中会逐一看到它们的用法和效果。

1.  使用autoLoad配置项为面板加载远程页面

    在本例中创建一个面板用于加载远程页面，示例中主要使用了 autoLoad 配置项设置要加载的远程页面url地址，同时展示了面板折叠和滚动条的效果，请看下面的示例代码。
    代码5-2：使用autoLoad配置项加载远程页面示例
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   title:'面板加载远程页面',
   height:150,//设置面板的高度
   width:250,//设置面板的宽度
   frame:true,//渲染面板
   autoScroll :true,//自动显示滚动条
   collapsible : true,//允许展开和收缩
   applyTo :'panel',
   autoLoad :'page1.html',//自动加载面板体的默认连接
   bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
  })
 });
  </script>
  <div id='panel'>
    代码 5-2 演示了设置面板的 autoLoad 配置项加载指定页面的方式，从下面的截图中可以看到，当面板初始化时自动加载了指定的page1.html页面，并且在页面内容超出面板大小时自动显示滚动条。效果如图5-2~5-4所示。
Ext.Panel面板 - ht_19820316 - ht_19820316的博客

2.  使用contentEl配置项为面板加载本地资源

    上例介绍了面板加载远程页面的方法，它是非常实用的方式，但是在有些情况下并不需要读取一份远程的页面，而只是将本页面中的已有部分展示在面板中，这就用到了contentEl配置项，它的作用就是指定在面板中所要显示的本地资源id，看下面的示例代码。
    代码5-3：使用contentEl配置项加载本地资源示例
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   title:'面板加载本地资源',
   height:150,                //设置面板的高度
   width:250,                //设置面板的宽度
   frame:true,               //渲染面板
   collapsible : true,          //允许展开和收缩
   autoScroll : true,           //自动显示滚动条
   autoHeight  : false,         //使用固定高度
   //autoHeight  : true,        //使用自动高度
   applyTo :'panel',
   contentEl :'localElement',    //加载本地资源
   bodyStyle:'background-color:#FFFFFF'       //设置面板体的背景色
  })
 });
  </script>
  <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>

    在代码5-3中可以看到员工列表并没有通过请求远程页面得到，而是直接将本页面中已存在的一份table 表格作为内容展示在了面板当中，这种方式省略了远程页面的读取过程，显示速度快，适合于展示简单的本地资源。同时在示例中还展示了自动高度与固定高度的不同效果，自动高度会根据展示内容的实际高度自动调整面板高度，所以在面板内部并没有出现滚动条。运行效果如图5-5和5-6所示。
Ext.Panel面板 - ht_19820316 - ht_19820316的博客

3.  使用html配置项自定义面板内容

    在上面2个示例中，不管是远程页面还是本地资源加载的都是已存在的页面内容。接下来介绍自定义面板内容的实现方式，可以自己编写HTML代码来定义自己需要的展示效果，示例使用面板的html配置项，通过它就可以实现自定义面板内容的目的，看下面的示例。
    代码5-4：使用html配置项自定义面板内容示例
<script type="text/javascript">
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  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>'
       ];
  var panel = new Ext.Panel({
   title:'使用html配置项自定义面板内容',
   height:150,             //设置面板的高度
   width:250,             //设置面板的宽度
   frame:true,             //渲染面板
   collapsible : true,        //允许展开和收缩
   autoScroll : true,        //自动显示滚动条
   applyTo :'panel',
   html: htmlArray.join(''),
   bodyStyle:'background-color:#FFFFFF'      //设置面板体的背景色
  })
 });
</script>
    图5-7与图5-5中展示的页面效果完全相同，但是它们却使用了完全不同的产生方式，html 配置项给了我们动态组织面板内容的途径，在代码 5-7 中首先创建了字符串数组htmlArray，然后通过调用数组的 join 方法将数组内容连接为整体供程序使用，读者也可以使用“+”进行字符串连接，这两种连接方式对程序的执行并没有任何影响。
Ext.Panel面板 - ht_19820316 - ht_19820316的博客

4.  使用items配置项在面板中添加组件

    在学习完前面3种为面板添加内容的方式之后，再介绍通过items配置项为面板添加组件的方式，这也是最重要和常用的面板功能之一。通过使用items配置项不但可以向面板中添加组件，还可以实现面板的多层嵌套，由于items既可以接受单个对象也可以接受数组为参数，所以将分2个示例分别讲解。 
    向面板中添加单一组件
    在代码5-5中将创建一个只包含日期选择组件的面板。
代码5-5：使用items配置项添加单一组件示例
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   header :true,
   title:'日历',
   frame:true,            //渲染面板
   collapsible : true,       //允许展开和收缩
   autoHeight : true,       //自动高度
   width : 189,           //固定宽度
   applyTo :'panel',
   items: new Ext.DatePicker()    //向面板中添加一个日期组件
  })
 });
  </script>
    代码5-5演示了向面板添加单一组件的方法，其中items配置项是向面板中添加组件的主要方式，在代码5-6中会演示向面板中添加多个组件的方法。运行效果如图5-8所示。

Ext.Panel面板 - ht_19820316 - ht_19820316的博客

图5-8  通过items配置项向面板中添加一个组件

向面板中添加多个组件
    可以向面板中添加普通组件，也可以向面板中添加子面板，因为面板（Ext.Panel）本身也是组件，因此面板本身可以通过items配置项添加到父面板中，这样就形成了多层面板嵌套的效果，这也是进行复杂页面布局的基础。下面是向面板添加多个组件的简单示例。
    代码5-6：使用items配置项添加多个组件示例
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   header :true,
   title:'使用items进行面板嵌套',
   frame:true,               //渲染面板
   collapsible : true,          //允许展开和收缩
   height : 200,
   width : 250,
   applyTo :'panel',
   defaults : {             //设置默认属性
    bodyStyle:'background-color:#FFFFFF',      //设置面板体的背景色
    height : 80,             //子面板高度为80
    collapsible : true,        //允许展开和收缩
    autoScroll : true         //自动显示滚动条
   },
   items: [
    new Ext.Panel({
     title : '嵌套面板一',
     contentEl : 'localElement'       //加载本地资源
    }),
    new Ext.Panel({
     title : '嵌套面板二',
     autoLoad : 'page1.html'         //加载远程页面
    })
   ]
  })
 });
  </script>
 <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>
 </table>
    代码 5-6 演示了向面板中添加多个组件的方法，items 配置项接受组件数组为参数依次
将组件添加到面板当中。效果如图5-9和5-10所示。
Ext.Panel面板 - ht_19820316 - ht_19820316的博客