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

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. ]