文档章节

ExtJS Panel 基本介绍

learn_more
 learn_more
发布于 2015/05/02 17:26
字数 933
阅读 149
收藏 2

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

© 著作权归作者所有

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
ExtJs自学教程(1):一切从API开始

该系列文章不侧重全方位的去介绍ExtJs的使用,只是侧重于解决ExtJs问题的思考方法。写的人不用长篇大论,学的人则能够自立更生。l 学习的人只要有一些CSS的javascript的基础知识并且对于英文...

77970290
2013/05/07
276
0
jQuery EasyUI 开源插件套装 完全替代ExtJS

我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比: 上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~ 漂亮的消息弹出,支持遮罩...

Amamatthew
2014/09/11
928
0
Dijit、ExtJS、jQuery UI 异同浅析

简介: 当今,各类 JavaScript 框架在前端开发中已经相当普及。Dojo、Ext jQuery 等主流 JavaScript 框架不仅提供了一系列核心 API 来屏蔽浏览器差异,简化 DOM 操作、增强 JavaScript 原生 ...

索隆
2012/02/21
525
0
extjs 如何让panel填满一个div?

利用fit布局可以让panel填满父panel,但现在父panel改成指定宽高的div,咋整? 目前的需求是,div可被用户调整大小(该功能用jquery插件gridster实现),调整完后,extjs panel组件要能自己自...

itwriter
2015/06/15
1K
2
GWT-Ext 入门

概述 GWT- Ext 是基于 Google Web Toolkit(GWT)和 ExtJs 的功能强大的网页开发控件库。它扩展了 GWT,在 ExtJs 的基础上实现了有排序功能的表格(Grid)、分页、过滤,支持有拖拽功能的树,...

红薯
2009/05/16
3.6K
4

没有更多内容

加载失败,请刷新页面

加载更多

同名依赖,多次引入导致的程序错误

表现: 本地测试正常,打包上线后报错找不到某个方法(缺少依赖),检测依赖发现,同名依赖有两个版本。 解决:删除一个,程序正常

避难所
20分钟前
3
0
在HTML中的下拉框中实现超连接

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <link rel="canonical" href="https://blog.csdn.net/weixin_34228617/article/details/86130280"/> ......

mickelfeng
25分钟前
3
0
Content7关闭防火墙命令

在外部访问CentOS中部署应用时,需要关闭防火墙。 关闭防火墙命令:systemctl stop firewalld.service 开启防火墙:systemctl start firewalld.service 关闭开机自启动:systemctl disable f...

无名氏的程序员
26分钟前
3
0
分布式存储原理:TiDB

浮躁的码农
38分钟前
6
0
CSS实现圆角边框的完美解决方案

css实现图片圆角,兼容所有浏览器: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <style type= "text/css" > /*通用样式--容器宽度值*/ .s......

前端老手
53分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部