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

1、Ext.Component

该组件在渲染的时候会默认的创建div DOM，是根据this.autoEl的配置来创建的，默认this.autoEl为 div，创建后保存在 this.el中

autoShow 设为true，渲染时会强制显示隐藏的元素，实际上会执行以下代码

Js代码


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的应用

Js代码


{

header : '性别',

width : 60,

dataIndex : 'sex',

hidden : true,//是否隐藏

sortable : true,// 是否能排序

menuDisabled : true,//True表示禁止列菜单。默认为fasle。

renderer : function(value) {//根据返回值处理

if (value == "1") {

return "男";

} else if (value == "0") {

return "女";

}

}

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

sortable : true,// 是否能排序

menuDisabled : true,// 隐藏右侧小箭头菜单

例如：

Js代码


{

header : '密码',

width : 85,

dataIndex : 'password',

sortable : false,// 是否能排序

menuDisabled : true,// 隐藏右侧小箭头菜单

editor : new Ext.form.TextField({

allowBlank : false,

minLength : 6,

maxLength : 20

})

}

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代码


layoutConfig: {

tableAttrs: {

style: {

width: '100%'

}

},

columns: 3

}

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

Js代码


items:[{

xtype : 'panel',

cellCls : '自定义css样式'

}

]