Ext.Panel的主要功能

Ext.Panel的主要功能

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

介绍面板组件的主要配置项及经常用法,这些配置项及方法将在后面的演示样例中用到,能够把这部分内容作为兴许章节的铺垫,进行高速的浏览,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)中button的对齐方式,有效值包含:‘right’, ‘left’ 和’center’,默觉得‘right’ 
buttons Array 添�到面板底部(footer)中button配置对象的数组
collapseFirst Boolean 设置渲染展开或收缩button的顺序。true则在其他button渲染前先渲染展开或收缩button,false则最后渲染,默觉得true。该配置项决定了展开或收缩button的位置。
collapsed Boolean 设置面板在第一次渲染时是否处于收缩状态,true则收缩,false则展开,默觉得false
collapsible Boolean 设置是否同意面板进行展开和收缩,true则同意进行展开和收缩,并在面板头部显示伸缩button。默觉得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元素的创建,假设一个或多个button被添�到footer中,则footer的设置会被忽略,而直接创建footer元素

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

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

表5-2  tools配置项明细表

配置项 參数类型 说明
id String 必选项,可能值及效果见表5.3
handler Function 点击button后触发的处理函数,參数包含: event : Ext.EventObjecttoolEl : Ext.ElementPanel : Ext.Panel
scope Object 处理函数的运行范围
qtip String/Object 为button指定提示信息,能够是字符串或配置对象
hidden Boolean 设置初次渲染时,是否隐藏
on Object 为button配置事件监听器。

表5-3  tools配置项id与button图标相应关系表
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)中button的对齐方式,有效值包含:‘right’, ‘left’ 和’center’,默觉得‘right’ 
buttons Array 添�到面板底部(footer)中button配置对象的数组
collapseFirst Boolean 设置渲染展开或收缩button的顺序。true则在其他button渲染前先渲染展开或收缩button,false则最后渲染,默觉得true。该配置项决定了展开或收缩button的位置。
collapsed Boolean 设置面板在第一次渲染时是否处于收缩状态,true则收缩,false则展开,默觉得false
collapsible Boolean 设置是否同意面板进行展开和收缩,true则同意进行展开和收缩,并在面板头部显示伸缩button。默觉得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元素的创建,假设一个或多个button被添�到footer中,则footer的设置会被忽略,而直接创建footer元素

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

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

表5-2  tools配置项明细表

配置项 參数类型 说明
id String 必选项,可能值及效果见表5.3
handler Function 点击button后触发的处理函数,參数包含: event : Ext.EventObjecttoolEl : Ext.ElementPanel : Ext.Panel
scope Object 处理函数的运行范围
qtip String/Object 为button指定提示信息,能够是字符串或配置对象
hidden Boolean 设置初次渲染时,是否隐藏
on Object 为button配置事件监听器。

表5-3  tools配置项id与button图标相应关系表
Ext.Panel的主要功能 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118837.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 火狐浏览器丢失书签,恢复无法处理备份文件的解决方案

    火狐浏览器丢失书签,恢复无法处理备份文件的解决方案

    2021年10月17日
  • 动静分离架构[通俗易懂]

    动静分离架构[通俗易懂]1.应用场景了解更多,根据具体场景选用不用的技术进行架构优化. 2.学习/操作 一、静态页面 静态页面,是指互联网架构中,几乎不变的页面(或者变化频率很低),例如: 首页等html页面 js/css等样式文件 jpg/apk等资源文件 静态页面,有与之匹配的技术架构来加速,例如: CDN ngi…

  • XMLDocument转为String[通俗易懂]

    XMLDocument转为String[通俗易懂]XMLDocument转为String
            staticpublicstringXmlDocumentToString(refXmlDocumentdoc)
            {
                MemoryStreamstream=newMemoryStream();
                XmlTextWriterwriter=newXmlTextWriter(stream,null);

  • pycharm反撤销快捷键_pycharm使用技巧

    pycharm反撤销快捷键_pycharm使用技巧pycharm中回退快捷键Ctrl+z反撤销快捷键Ctrl+Shift+z

  • Linux 设置固定IP地址

    Linux 设置固定IP地址当我们安装完linux之后需要做的第一件事就是配置网络,因为有了网络我们可以做更多的事,比如下载插件,使用xshell工具连接等等ifconfig查看网络配置,类似windows的ipconfiglinux的网络配置文件一般在/etc/sysconfig/network-scripts/下面,使用命令cd切换到该路径下其中ifcfg-eth0就是虚拟机桥接的网络配置,如果有无…

  • KindEditor配置和使用

    KindEditor配置和使用|字号订阅很长时间没有写学习心得了,整理了一下思路,简单写一下吧。1下载kindeditor包,目前最新版本是kindeditor-3.5.5。下载地址:http://www.kindsoft.net/2.解压之后,解压目录kindeditor如下图所示。3.开始瘦身,其实调用kindeditor并不需要那么多文件,只要保留目录:…

    2022年10月12日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号