ExtJS Panel 基本介绍

一、Panel 是一个特殊的容器，由于他既有容器的特性，又具备本身独有的特性。

    Panel是一个容器,具备特定的功能和结构组件，使它使可以完美地为面向应用的用户界面建立部件。 Panel继承自Ext.container.Container,能够设置自身的layout布局,而且能够包含子组件。要么指定Panel的items，要么动态向Panel中添加Components ，要记得考虑 你但愿Panel如何排列这些子元素，而且这些子元素是否须要使用Ext内建的layoutlayout规则调整尺寸。 默认状况下，Panel使用ContainerLayout自动规则。它简单地渲染子组件，将它们一个接一个地添加到Container中， 而且再也不进行任何调整尺寸的操做,不然还能够配置layout来设置panel容器内子组件的大小与位置。

二、面板组件被分为七个部分，分别是：

标题、工具栏（上下左右）、按钮工具栏、内容区域

1）标题（title）：标题栏里不单单是一个文本标题，还能够添加工具，由于他还有Header功能，能够在工具去添加工具，好比最小化、最大化等。配置项使用 title:'title' 和 tools:[{xtype:'help'},{xtype:'search'}]

2）工具栏：tbar  bbar lbar rbar ; 分别对应上下左右的工具栏，使用与tools一致

3）按钮工具栏：buttons或fbar，两者都是在内容区域与bbar之间显示工具，还能够经过buttonAlign来控制按钮的摆放

4）内容区域：若是单纯使用模板方法模式，可使用html配置项，若是做为容器，最好使用items添加子组件

三、面板的一些重要属性

1）closeAction：能够字符串的destroy（默认）或hide；前者是当点击close关闭按钮或调用close方法时会彻底销毁对象，把DOM从文本树中移除，后者只是隐藏，还可使用show展现出来。

2）bodyCls：面板主体样式，这个是一个class类名哦

3）bodyStyle：面板主体样式，这个是一个style配置项

4）bodyPadding：面板主体内边距，其实就是子组件之间的距离

5）layout：默认自动布局，能够设置字符串或layout对象来设置布局

6）width、height：容器的大小

7）icon：指定一个图片路径，设置标题栏的图标

8）IconCls：一个class名称，设置标题栏的图标

4 、tools 工具栏的配置项

1）type：按钮名称，诸如 save help search ..........

2）handler：工具点击时触发的事件

3）scope：做用域

4）stopEvent：若是为false表示容许事件进行传播

5）tooltip：字符串或QuickTips对象，其实就是鼠标放在图标上时显示的提示信息

5 、实例

var resultsPanel = Ext.create('Ext.panel.Panel', {
    title: 'Results',
    width: 600,
    height: 400,
    renderTo: Ext.getBody(),
    layout: {
        type: 'vbox',       // 子元素垂直布局
        align: 'stretch',    // 每一个子元素宽度充满子容器
        padding: 5
    },
    items: [{               // 指定一个grid子元素
        xtype: 'grid',
        columns: [{header: 'Column One'}],            // 只配置一列显示，没有数据
        store: Ext.create('Ext.data.ArrayStore', {}), // 设置一个没有数据的store
        flex: 1                                       // 占用容器的1/3高度 (在以 Box 为布局中)
    }, {
        xtype: 'splitter'   //一个分割器在两个子组件之间
    }, {                    // Details 面板做为一个配置进来的Panel (没有用xtype指定，默认是 'panel').
        title: 'Details',
        bodyPadding: 5,
        items: [{
            fieldLabel: 'Data item',
            xtype: 'textfield'
        }], // 表单元素(文本域)
        flex: 2             // 占用容器的2/3高度 (在以 Box 为布局中)
    }]
});

参考：

1）ExtJS 权威指南

2）ExtJS4.0 帮助文档