ExtJS Panel 基本介绍

原创
2015/05/02 17:26
阅读数 210

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

展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部