ExtJS Panel 基本介绍

2019独角兽企业重金招聘Python工程师标准>>>

1、Panel 是一个特殊的容器，因为他既有容器的特性，又具有自己独有的特性。

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

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

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

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

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

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

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

3、面板的一些重要属性

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 帮助文档

转载于:https://my.oschina.net/heweipo/blog/409107