Ext入门学习系列(四)面板控件
2016-03-07 17:16
246 查看
第四章 使用面板
上节学习了Ext复杂对话框,更进一步了解了Ext的运行机制。本章重点来了解Ext所有控件的基础——面板控件。一、Ext的面板是什么?
同样先来看看几个效果:代码
这样就可以处理每个按钮的事件了。
当然除了常用的这几个属性外,还有一大堆属性,这里以表格的形式列举出来,供大家查阅:
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)中按钮的对齐方式,有效值包括:'right', 'left' 和'center',默认为'right' | ||
buttons | Array | 加入到面板底部(footer)中按钮配置对象的数组 | ||
collapseFirst | Boolean | 设置渲染展开或收缩按钮的顺序。true则在其它按钮渲染前先渲染展开或收缩按钮,false则最后渲染,默认为true。该配置项决定了展开或收缩按钮的位置。 | ||
collapsed | Boolean | 设置面板在第一次渲染时是否处于收缩状态,true则收缩,false则展开,默认为false | ||
collapsible | Boolean | 设置是否允许面板进行展开和收缩,true则允许进行展开和收缩,并在面板头部显示伸缩按钮。默认为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元素的创建,如果一个或多个按钮被加入到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时,是否显示展开或收缩按钮 | ||
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 | 工具按钮配置对象的数组,这些按钮会被添加到面板头部功能区,在表5-2中会有详细的说明 | ||
width | Number | 面板宽度,默认为auto | ||
tools配置项明细表
配置项 | 参数类型 | 说明 |
id | String | 必选项,可能值及效果见表5.3 |
handler | Function | 点击按钮后触发的处理函数,参数包括: event : Ext.EventObject、toolEl : Ext.Element、Panel : Ext.Panel |
scope | Object | 处理函数的执行范围 |
qtip | String/Object | 为按钮指定提示信息,可以是字符串或配置对象 |
hidden | Boolean | 设置初次渲染时,是否隐藏 |
on | Object | 为按钮配置事件监听器。 |
![](http://images.cnblogs.com/cnblogs_com/madyina/WindowsLiveWriter/Ext_F3C0/clip_image013_thumb.jpg)
三、总结
本次课程我们分别举例说明了Ext面板控件的基本使用,以后的很多高级控件都是基于本节课,后续的章节会讲到。当然,Ext还有一个最显著的特点就是可拖拽,那么实现一个控件可拖拽到底难不难?只需要配置draggable:true即可,大家可以试下。不过我相信20秒过后一大堆转头就飞过来了,原因是,拖是可以拖了,但是,鼠标一松,就又回到原地了,这又如何处理?网上有很多方法都过于复杂,这里给出一个简单解决办法:只需要在主函数体中加上一句:new Ext.dd.DDProxy('basic');//加上这一句就可以随意拖动
OK,今天就到此结束。
本章代码下载
相关文章推荐
- jmeter测试https
- MySQL索引设计原则
- Android Studio当中配置Open CV
- 多节点Kubernetes安装
- 关于类中方法的调用
- vim字符串替换
- Ext入门学习系列(五)表格控件(3)
- 【mark】App Widget设计
- jQuery 读取 JSONArray 的方法
- 求正整数各位数字之和
- centos 7 源码安装MySQL-5.6.20
- 【周练2016.3.7】B - Lucky Numbers(位运算,水)
- 面试经验(妙计旅行:C++算法工程师)
- cocosjs模态对话框
- 杂题 SPOJ MOBILE2 - Mobiles
- x264代码剖析(三):主函数main()、解析函数parse()与编码函数encode()
- 爬虫第二章笔记(1)
- Adjacent Node Sum(邻接表处理)
- x264代码剖析(三):主函数main()、解析函数parse()与编码函数encode()
- SQLite简易入门