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) {//根据返回值处理
- if (value == "1") {
- return "男";
- } else if (value == "0") {
- return "女";
- }
- }
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
- })
- }
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,例如
- layoutConfig: {
- tableAttrs: {
- style: {
- width: '100%'
- }
- },
- columns: 3
- }
另外td的样式设置为:在容器items中添加属性cellCls,利用新加的css样式来控制td,例如
- items:[{
- xtype : 'panel',
- cellCls : '自定义css样式'
- }
- ]