大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。
介绍面板组件的主要配置项及经常用法,这些配置项及方法将在后面的演示样例中用到,能够把这部分内容作为兴许章节的铺垫,进行高速的浏览,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但没有设置header则header会被自己主动创建。假设提供了title但明白设置header为false则header不会被创建 |
headerAsText | Boolean | 设置是否在面板的header中显示title,true则显示,默觉得true |
height | Number | 面板高度,默觉得auto |
hideBorders | Boolean | true则隐藏面板容器中全部组件的边框,false则依据组件的详细配置进行显示 |
hideCollapseTool | Boolean | 设置当collapsible为true时,是否显示展开或收缩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则显示,或通过字符串指定阴影的显示模式,有效值包含:sides、frame、drop,默觉得‘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.EventObject、toolEl : Ext.Element、Panel : Ext.Panel |
scope | Object | 处理函数的运行范围 |
qtip | String/Object | 为button指定提示信息,能够是字符串或配置对象 |
hidden | Boolean | 设置初次渲染时,是否隐藏 |
on | Object | 为button配置事件监听器。 |
上节介绍了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但没有设置header则header会被自己主动创建。假设提供了title但明白设置header为false则header不会被创建 |
headerAsText | Boolean | 设置是否在面板的header中显示title,true则显示,默觉得true |
height | Number | 面板高度,默觉得auto |
hideBorders | Boolean | true则隐藏面板容器中全部组件的边框,false则依据组件的详细配置进行显示 |
hideCollapseTool | Boolean | 设置当collapsible为true时,是否显示展开或收缩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则显示,或通过字符串指定阴影的显示模式,有效值包含:sides、frame、drop,默觉得‘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.EventObject、toolEl : Ext.Element、Panel : Ext.Panel |
scope | Object | 处理函数的运行范围 |
qtip | String/Object | 为button指定提示信息,能够是字符串或配置对象 |
hidden | Boolean | 设置初次渲染时,是否隐藏 |
on | Object | 为button配置事件监听器。 |
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118837.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...