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

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 中一些属性的说明与功能

 

1.  sortable : true,// 是否能排序
2.  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显示时对其后面的一切内容进行遮罩