Ext 组件的一些操作
原文:http://linder0209.iteye.com/blog/1039200
1、Ext.Component
- 该组件在渲染的时候会默认的创建div DOM,是根据this.autoEl的配置来创建的,默认this.autoEl为 div,创建后保存在 this.el中
- autoShow 设为true,渲染时会强制显示隐藏的元素,实际上会执行以下代码
- if(this.autoShow){//自动显示
- this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);
- }
该参数的设置,比如在多标签中如果想渲染隐藏标签的组件,并且渲染的时候又想计算高度和宽度,因为隐藏后,组件高度宽度不可见,把标签的子元素设为自动显示会实现这个效果。
- hideMode 隐藏模式,可支持的值有"visibility" (css中的visibility),"offsets"(负偏移位置)和"display"(css中的display)-默认为“display”,第一个和第二个虽然不可见,但仍然影响布局(即有高度和宽度)。最后一个除了不可见也不会影响布局。
2、Ext.grid.GridPanel
2.1、Ext.grid.ColumnModel 中renderer的应用
- {
- header : '性别',
- width : 60,
- dataIndex : 'sex',
- hidden : true,//是否隐藏
- sortable : true,// 是否能排序
- menuDisabled : true,//True表示禁止列菜单。默认为fasle。
- renderer : function(value, meta, record) {//根据返回值处理
- if (value == "1") {
- return "男";
- } else if (value == "0") {
- return "女";
- }
- }
renderer指定的函数中各参数意思为
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
return value;
}
- value:对应的cell中的值
- metaData:单元格元数据对象,可以设置该单元格的如下属性
css:单元格CSS样式,作用在td元素上
attr:一段HTML属性的字符串,将作用于表格单元格内的数据容器元素(如'style="color:red;"')
cellAttr:设置单元格的属性
style:单元格的样式
id:单元格id
value:单元格值
- record:当前行记录数据
- rowIndex:当前行Index
- colIndex:当前列Index
- store:gridPanel 中store
利用renderer可以方便的处理每个单元格中的数据和实现
2.2、Ext.grid.ColumnModel 中一些属性的说明与功能
- sortable : true,// 是否能排序
- menuDisabled : true,// 隐藏右侧小箭头菜单
例如:
- {
- header : '密码',
- width : 85,
- dataIndex : 'password',
- sortable : false,// 是否能排序
- menuDisabled : true,// 隐藏右侧小箭头菜单
- editor : new Ext.form.TextField({
- allowBlank : false,
- minLength : 6,
- maxLength : 20
- })
- }
2.3 Ext.grid.RowSelectionModel
获取grid的选中的第一行的方法为 grid.getSelectionModel().getSelected()
获取grid的所有选中的行的方法为 grid.getSelectionModel().getSelections()
3、Ext.TabPanel
true不渲染隐藏标签中的组件,false会渲染
内置地,Tab面板是采用Ext.layout.CardLayout的方法管理tabs。此属性的值将会传递到布局的Ext.layout.CardLayoutdeferredRender配置值中, 以决定tab面板是否只有在第一次访问时才渲染(缺省为true)。
注意如果将deferredRender设为true的话, 又使用form的话,那表示只有在tab激活之后,全部的表单域(Fields)才会被渲染出来, 也就是说不管是提交表单抑或是执行getValues或setValues都是无用。
4、Ext.FormPanel
4.1、Form组件(输入框、单选等)
Form组件基类为Ext.form.Field,公共方法有:
- reset:重置此元素的值到原始值,并且清除所有无效提示信息。对于下拉选项该方法很有用
4.2 Form组件中的表单
4.2.1、Ext.form.TextField 属性emptyText和emptyClass 空字段中显示的文本和样式
4.2.2、Ext.form.ComboBox 关于该组件几个重要属性的说明
emptyText : '请选择',//默认显示的文本
emptyOption: false,//false则下拉列表中不显示“请选择”,true则显示(内部组件扩展了该属性cext)
autoSelect: false,//true表示自动选择下拉列表中默认的第一个值(如果还没有选择的话),false则不会选择默认第一个值(除非已经选择了)
submitValue:false,//False表示清楚name属性来达到不能提交该属性值,设为true将会提交隐藏域和元素本身域
submitValue该属性对于其他表单项也适应
5、布局器TableLayout
当把容器的布局器设为layout='table'时,如果想设置布局器中table的样式,可以在this.layoutConfig中设置tableAttrs,例如
- layoutConfig: {
- tableAttrs: {
- style: {
- width: '100%'
- }
- },
- columns: 3
- }
另外td的样式设置为:在容器items中添加属性cellCls,利用新加的css样式来控制td,例如
- items:[{
- xtype : 'panel',
- cellCls : '自定义css样式'
- }
- ]
6、布局器Ext.layout.BorderLayout
这是一种多面板,面向应用程序UI的布局风格,可支持多个套嵌面板,各区域间自动分隔和扩展/收缩功能。只有该布局方式才能动态改变各区域大小、隐藏显示各区域。布局后,整个区域不会显示滚动条。该布局器中几个常用的配置项说明如下
- collapseMode 默认下,可关闭的区域是通过点击区域标题条上的工具按钮来控制区域是否关闭的(collapsible设为true,并且设置了区域标题)。当collapseMdoe被设置为'mini'时,区域的分隔条中间会有一个小小的关闭按钮。 在'mini'模式下区域会闭合成为一个比常规模式下更细小的水平条。 默认下collapseMode是设置为undefined,支持两种值undefined和'mini'。注意如果可关闭的区域没有标题条,要想实现隐藏/显示区域效果,只能把collapseMode设置为'mini'以便标题条没有渲染也可以由用户来关闭区域。
- collapsible True表示为允许用户闭合此区域(默认为false)。如为true,区域上的title bar(前提是设置了title bar)将会渲染出“展开/收缩”的按钮,否则将不会显示。
- split True表示可允许用户动态调节区域的大小(缺省为false)。当split=true,通常需要指定区域的minSize和 maxSize。
- margins 作用在区域上的外补丁对象,对象的格式如{left: (左边距), top: (上边距), right: (右边距), bottom: (下边距)}。
- cmargins 作用在区域闭合元素上的外补丁对象,对象的格式如{left: (左边距), top: (上边距), right: (右边距), bottom: (下边距)}。
7、Ext.Window
modal: true,//true 表示为当window显示时对其后面的一切内容进行遮罩
Ext 组件的一些操作的更多相关文章
- EXT 组件一些属性与方法(Tree)
1.Ext.tree.TreePanel 主要配置项: root:树的根节点. rootVisible:是否显示根节点,默认为true. useArrows:是否在树中使用Vista样式箭头,默认为f ...
- ExtJS学习(二)Ext组件模型
Ext中所有的组件都继承自Ext.component,这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期,这样在后续对这些组件进行维护管理时将更加便捷,同时也保证了在进行布局时的便利. 组件 ...
- ext组件中的查询
组件中的查询依赖于组件树,往上可追溯父组件,往下可查找子组件. 组件中的查询主要包括8个方法:up.down.query.child.nextNode.nextSibiling.previoutNod ...
- ext组件的查询方式
1.使用id进行查询 (1)Ext.ComponentQuery.query("#mypanel") (2)Ext.getCmp("mypanel") 2.根据 ...
- ansible-playbook组件解析及操作全解
转载于http://www.178linux.com/7001 一.ansible-playbook介绍: playbook是由一个或多个”play”组成的列表.play的主要功能在于将事先归为一组的 ...
- rbac组件之角色操作(二)
为了与stark组件分离,形成独立的模块,所以rbac数据表的操作需要单独进行操作,对角色表的操作. urls.py urlpatterns = [ re_path(r'^roles/list/$', ...
- 吴裕雄--天生自然python学习笔记:python用 Selenium 组件实现浏览器操作自动化
一般情况下,我们都是用手工操作的方式来对浏览器进行各种操作 . 实际上, 只要我们安装一个自动化操作组件, Python 就可以让我们的很多操作实现自动化 . Selenium 组件 在开发网页时,用 ...
- 终于懂了:两个UI组件同时在操作是不可能实现的
// 目的:从某个对话框里,选择一些路径,然后用Tree自动展开这些路径,但至少需要几秒钟时间 // 问题:在这几秒钟期间,显示一个等待对话框,只能开多线程,因为后台继续要处理tree的一些事情.等待 ...
- vue中子组件通过$parent操作父组件的参数或者方法
先看一个简单的demo: 父组件添加一个弹框,弹框的内容是另外导入的一个子组件: <Modal v-model="accountDetailsModal" class=&qu ...
随机推荐
- 【转载,整理】Linux性能监控
一. 比较全的linux性能检测网站 1. 很好的网站,原文:http://os.51cto.com/art/201402/430050.htm 监测 cpu.内存.网络.IO等命令及工具 2. ...
- logstash 中多行合并
这里我之前是在input里面配置的多行合并,合并语法为: input { beats { type => beats port => 7001 codec => multiline ...
- activiti设置流程变量
public static void mian(String args[]){ ProcessEngine processEngine = ProcessEngine.getDefaultProce ...
- 单例模式在JDBC数据库连接操作里的应用
设计模式之单例模式一般应用在在数据库操作里,数据库操作就要常常创建实例,然后进行数据库操作,全部就能够 将数据库操作的方法.进行封装,然后採用单例模式进行设计,然后採用单例模式之后,就能够节约系统资源 ...
- 有关google的appengine部署服务器的简单教程
以下的内容都是看这个网址:https://developers.google.com/appengine/. 1.既然是google的东西.当然就要注册一个google的账号吧. (记得注册后要顺便把 ...
- 【Unity】6.4 Transform--移动、旋转和缩放游戏对象
分类:Unity.C#.VS2015 创建日期:2016-04-20 一.简介 Unity引擎提供了丰富的组件和类库,为游戏开发提供了非常大的便利,熟练掌握和使用这些API,对于游戏开发的效率提高很重 ...
- distinct aggregation
https://docs.google.com/document/d/1zj6OA-K2hi7ah8Fo-xTQB-mVmYfm6LsN2_NHgTCVmJI/edit# https://issues ...
- MySQL内置函数获取几天前的日期
如何采用mysql内置函数获取指定时间之前的日期呢? SELECT something FROM table_name WHERE DATE_SUB(CURDATE(),INTERVAL 30 DAY ...
- android Socket 编程
Socket 通信 1.UDP实现 (DatagramSocket) [客户端] //首先创建一个DatagramSocket对象 DatagramSocket socket = new Datag ...
- convert2utf8withbom
很久以前给同事要的转码bash 当时windows和mac总是出现中文注释乱码的情况,让人心塞的难过.又因为是老项目,现有源码太多了,不可能改模板重新创建.只能跑一遍这个玩意儿了…… #!/bin/b ...