Ext 组件操作总结——会不断完善

本文详细介绍了ExtJS框架中的关键组件及其配置项,包括Ext.Component的DOM渲染特性、Ext.grid.GridPanel的数据展示与编辑功能、Ext.TabPanel的标签管理方式、Ext.FormPanel的表单处理方法及TableLayout布局器的样式定制技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、Ext.Component

  • 该组件在渲染的时候会默认的创建div DOM,是根据this.autoEl的配置来创建的,默认this.autoEl为 div,创建后保存在 this.el中
  • autoShow 设为true,渲染时会强制显示隐藏的元素,实际上会执行以下代码
Js代码   收藏代码
  1. if(this.autoShow){//自动显示  
  2.      this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]);  
  3.  }  

        该参数的设置,比如在多标签中如果想渲染隐藏标签的组件,并且渲染的时候又想计算高度和宽度,因为隐藏后,组件高度宽度不可见,把标签的子元素设为自动显示会实现这个效果。

  • hideMode 隐藏模式,可支持的值有"visibility" (css中的visibility),"offsets"(负偏移位置)和"display"(css中的display)-默认为“display”,第一个和第二个虽然不可见,但仍然影响布局(即有高度和宽度)。最后一个除了不可见也不会影响布局。

2、Ext.grid.GridPanel

 

2.1、Ext.grid.ColumnModel 中renderer的应用

 

Js代码   收藏代码
  1. {  
  2.       header : '性别',  
  3.       width : 60,  
  4.       dataIndex : 'sex',  
  5.       hidden : true,//是否隐藏  
  6.       sortable : true,// 是否能排序  
  7.       menuDisabled : true,//True表示禁止列菜单。默认为fasle。  
  8.       renderer : function(value) {//根据返回值处理  
  9.         if (value == "1") {  
  10.           return "男";  
  11.         } else if (value == "0") {  
  12.           return "女";  
  13.         }  
  14.       }  

  2.2、Ext.grid.ColumnModel 中一些属性的说明与功能

 

  1.  sortable : true,// 是否能排序
  2.  menuDisabled : true,// 隐藏右侧小箭头菜单

例如:

 

Js代码   收藏代码
  1. {  
  2.       header : '密码',  
  3.       width : 85,  
  4.       dataIndex : 'password',  
  5.       sortable : false,// 是否能排序  
  6.       menuDisabled : true,// 隐藏右侧小箭头菜单  
  7.       editor : new Ext.form.TextField({  
  8.             allowBlank : false,  
  9.             minLength : 6,  
  10.             maxLength : 20  
  11.           })  
  12.     }  

 

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:重置此元素的值到原始值,并且清除所有无效提示信息。对于下拉选项该方法很有用

5、布局器TableLayout

     当把容器的布局器设为layout='table'时,如果想设置布局器中table的样式,可以在this.layoutConfig中设置tableAttrs,例如

Js代码   收藏代码
  1. layoutConfig: {  
  2.       tableAttrs: {  
  3.           style: {  
  4.               width: '100%'  
  5.           }  
  6.       },  
  7.       columns: 3  
  8.   }  

 另外td的样式设置为:在容器items中添加属性cellCls,利用新加的css样式来控制td,例如

Js代码   收藏代码
  1. items:[{  
  2.    xtype : 'panel',  
  3.    cellCls : '自定义css样式'  
  4.  }  
  5. ]  
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值