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显示时对其后面的一切内容进行遮罩
转载于:https://www.cnblogs.com/qidian10/p/3151796.html
Ext 组件的一些操作相关推荐
- extlink.php,ExtJs 学习笔记基础篇 Ext组件的使用_extjs
昨天刚接触到Extjs,简单写了篇学习笔记,今天继续. 天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要 ...
- 把Fusioncharts封装成Ext组件的思路 及实现
Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭. 一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里 然 ...
- 把Fusioncharts封装成Ext组件的思路
Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭. 一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里 然 ...
- reactJS -- 9 组件的Refs(操作DOM的两种方法)
2019独角兽企业重金招聘Python工程师标准>>> 一.概述 https://react-cn.github.io/react/docs/more-about-refs.html ...
- Spring boot(web 组件,ORM 操作 MySQL,接口架构风格—RESTful,集成 Redis,集成 Dubbo,打包)
文章目录 1.3 第三章 Spring Boot 和 web 组件 1.3.1 SpringBoot 中拦截器 1.3.2 Spring Boot 中使用 Servlet 1.3.3 Spring B ...
- ansible-playbook组件解析及操作全解
playbook是由一个或多个"play"组成的列表.play的主要功能在于将事先归为一组的主机装扮成事先通过ansible中的task定义好的角色.从根本上来将,所谓的task无 ...
- vue父子组件赋值操作时报错Avoid mutating a prop directly since the value will be overwritten whenever
前言: 我写了一个组件,然后子组件外层绑定了一个v-model='moreInquiriesCard', 这个值通过props取的父组件传过来的值,子组件是个modal弹框,对默认右上角有个" ...
- win10 计算机组件,win10系统删除那些不必要组件的操作步骤
win10系统使用久了,好多网友反馈说关于对win10系统删除那些不必要组件设置的方法,在使用win10系统的过程中经常不知道如何去对win10系统删除那些不必要组件进行设置,有什么好的办法去设置wi ...
- Vue 组件间通信并不是每一次操作都会触发新的通信
需求:新增或者修改都需要组件间立马通信. 操作:把B组件(子组件,这里指的是三级联动组件)的数据传输过来,在A(父组件)组件中处理 即 子传父 这里指的是修改页面或者新增页面三级联动下拉选择完之后 点 ...
最新文章
- android一个简单的异步AsyncTask下载数示例,简单下载(07)
- python中的全局变量与局部变量
- Elasticsearch 使用copy_to组合字段进行查询
- python的类和实例化对象
- 区块链去中心化有那么有用吗?
- JQUERY的toFixed()
- 如何利用Excel对公众号阅读量进行预测?
- Java 基本语法----数组
- java积分签到功能_对于签到功能的一点理解
- antd vue form 手动校验_vue测试模板与jsonSchema自动生成elment组件
- python 数据分析与挖局书籍
- Anaconda下载速度慢
- excel文件服务器未响应,excel打不开文件未响应怎么处理-处理excel无法打开文件未响应的方法 - 河东软件园...
- 为什么这几年男生都不愿意去追女生了?
- 网站pc端和手机端视频的处理
- 人工智能的发展历程和未来发展趋势
- 工业机器人pallet指令_近30年现场一线工作者,讲述工业机器人应用案例集锦!...
- Burp Suite爆破模块中的四种模式的区别详解和演示(暴力破解)
- matlab 局部变量和全局变量,C++局部变量和全局变量(详解版)
- 抓紧时间,先考张CCIE-EI证书
热门文章
- 物流设计大赛优秀作品_喜报 | 物流设计大赛商院学子获佳绩,实现该项竞赛零的突破...
- js预览本地word文档_怎么免费下载百度文库付费文档?
- java小_Java小知识点总结
- 西南交通大学计算机网络,西南交通大学计算机网络实验2015-2016第2学期期末试卷...
- html 使用符号设置固定链接,关于dw-question-answer的调试和固定链接id.html设置
- java中两短行代码合并一行_帮忙啊!!!!找出两个Java文件相似程度超过某一%的代码行。...
- java笔试题型_JAVA笔试必备题
- tomcat java_opts 最大_tomcat性能优化(JAVA_OPTS)
- 左室短轴切面_【图】短轴超声切面 - 心脏解剖学 - 天山医学院
- Java 算法 S01串