`

Ext.grid.ColumnModel

 
阅读更多

引自:http://itworktor.blog.163.com/blog/static/175203029201086103845632/

Ext.grid.ColumnModel


    该类用于定义表格的列模型,其配置项是一个由“列定义”组成的数组,还可以是JSON组成的对象。其中也定义很多操作列的
属性、方法 比如:查找某个列,隐藏某个列等等...

 
一, 用数组的方式配置ColumnModel
   var colModel = new Ext.grid.ColumnModel([
        { header:'编号', dataIndex:'id',width:200},
        { header:'名称', dataIndex:'name',width:300}
   ]};

  注意:上述写法ColumnModel的构造参数必须是一个数组,哪怕只有一列。

二、 用JSON对象的方式配置ColumnModel
  var colModel = new Ext.grid.ColumnModel({
       columns:[    --列集合的定义
                 { header:'编号', dataIndex:'id',width:200},
                 { header:'名称', dataIndex:'name',width:300}
        ],
       defaults:{   --公共属性配置
           sortable:true,
           menuDisabled:true,
           width:100
        },
       listeners:{    --监听事件
           "widthchange":function(cm,colIndx,width){
               saveConfig(colIndex,width);
           }   
       }
  });
  这种写法的好处是更加的面向对象,也便于继承。

 
三、常用属性介绍:
   header               设置列标题
   dataIndex           设置列对应数据源的name值
   editor                 设置在编辑状态下,指定编辑器
   align                  设置列标题的对齐方式
   widht                 设置列的宽度
   css                   设置列头的CSS样式
   fixed                  表示列头的宽度是否可以改变,默认为true
   hidden               表示是否是隐藏列,默认为false
   hideable            表示是否禁止用户隐藏该列,默认为false
   menuDisabled   表示是否禁止列菜单 默认为false
   resizable           表示是否禁止列可变大小,默认为false
   sortable             表示列是否可排序,默认为false
   tooltip               表示列头部显示的提示文字
   renderer            用于加工单元格的原始数据,
   id                     列的标识,列的所有单元格包括头部都是用这个值来创建CSS的class属性
格式为:
    x-grid3-td-id     单元格样式
    x-grid3-td-hd-id  列头样式

 
四、常用方法介绍:
   findColumnIndex    根据dataIndex里的值,返回列的索引
   getColumnById      返回指定ID的列
   getColumnCount     返回列数
   getColumnId        返回指定index列的ID
分享到:
评论

相关推荐

    Ext.grid.ColumnModel显示不正常

    Ext.grid.ColumnModel显示不正常

    Ext.grid.GridPanel属性祥解

    - 示例:`reconfigure(new Ext.data.JsonStore(...), new Ext.grid.ColumnModel([...]))` #### 四、Ext.grid.Column详解 `Ext.grid.Column`代表了表格中的一列,可以通过以下配置项来定义其行为和外观: 1. **id*...

    可编辑表格Ext.grid.EditorGridPanel

    var cm = new Ext.grid.ColumnModel([ {header: 'Name', width: 200, dataIndex: 'name', editor: new Ext.form.TextField()}, {header: 'Age', width: 100, dataIndex: 'age', editor: new Ext.form.NumberField...

    ExtJs GridPanel双击事件获得双击的行

    var grid = Ext.create('Ext.grid.Panel', { store: store, columns: columns, renderTo: Ext.getBody() // 渲染到页面 }); ``` 接下来,我们需要为GridPanel添加双击事件监听器。在ExtJs中,我们可以使用`...

    Ext grid 简单实例

    3. **配置Column Model**: 创建一个Ext.grid.ColumnModel,定义每列的属性,如text(列标题)、dataIndex(与Model字段关联)和width。 4. **创建Grid Panel**: 创建一个Ext.grid.Panel实例,将Store、Model和...

    EXT核心API详解

    69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext.grid.GroupingView类 ………… 60 73、Ext.grid.EditorGridPanel类 ……… 62 74...

    ext表格布局小例子

    var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, { header: '', dataIndex: 'id', width: 40 }, { header: '', dataIndex: 'name', width: 80 }, { header: 'Ա', dataIndex: 'sex', ...

    ExtJS入门教程(超级详细)

    69、Ext.grid.ColumnModel类 ……… 58 70、Ext.grid.PropertyColumnModel类 … 59 71、Ext.grid.GridView类 …………… 59 72、Ext.grid.GroupingView类 ………… 60 73、Ext.grid.EditorGridPanel类 ……… 62 74...

    Ext下拉树、下拉表格

    2. 定义表格列:使用Ext.grid.ColumnModel或者Ext.grid.column.Column定义列的配置,包括标题、宽度、数据绑定等。 3. 创建表格:使用Ext.grid.Panel或Ext.view.Table创建表格视图,并将其与数据源关联。 4. 配置...

    ExtJs表格点击超链接获取行的值

    在ExtJs框架中,我们经常需要在表格(`Ext.grid.Panel`)中显示超链接,并且当用户点击这些超链接时,能够获取到当前行的数据。为了实现这一功能,我们可以使用`renderer`函数对单元格进行自定义渲染。 **代码示例*...

    Ext2.0框架的grid使用

    var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '性别', dataIndex: 'sex'}, {header: '名称', dataIndex: 'name'}, {header: '描述', dataIndex: 'descn'} ]); ``` ...

    ext的grid简易例子

    例如,`Ext.grid.ColumnModel`可以用来设置每一列的显示样式和数据源。 4. **Grid Panel**:实际展示Grid的组件,它包含了Store、Column Model和其他配置项。通过`Ext.grid.Panel`创建一个Grid,配置`store`为数据...

    EXT核心API详解pdf

    ### EXT核心API详解:Ext.grid.ColumnModel与Grid定制 #### 概述 在现代Web开发中,特别是使用ExtJS框架进行复杂用户界面构建时,`Ext.grid.ColumnModel`是实现功能丰富的表格展示不可或缺的一部分。本文将详细介绍...

    Ext2[1].0框架的Grid使用介绍

    本文介绍了Ext2.0框架中Grid控件的基本使用方法,包括如何定义ColumnModel、创建Store以及如何在Grid中添加CheckBox。通过这些基本的操作,我们可以构建出功能丰富且交互性强的数据展示界面。Ext2.0的强大之处在于它...

    Ext2.0框架的Grid使用介绍

    var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '性别', dataIndex: 'sex'}, {header: '名称', dataIndex: 'name'}, {header: '描述', dataIndex: 'descn'} ]); cm....

    EXTGrid属性方法

    ### EXTGrid属性方法详解 #### 一、Ext.grid.GridPanel `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件,用于创建数据表格。以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的...

    extjs帮助文档pdf版

    - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用方法**: - `Ext.create()`: 创建一个组件实例...

    ExtJs学习资料28-Ext.data.JsonStore数据存储器.doc

    var col=new Ext.grid.ColumnModel([{ header:"姓名", dataIndex:"name", menuDisabled:true, align:"center"}, {header:"年龄", dataIndex:"age", sortable:true, align:"center"}, {header:"性别", dataIndex:...

    ExtJs中处理后台传过来的date对象显示到页面上

    var cm = new Ext.grid.ColumnModel({ columns: [ {header: '姓名', dataIndex: 'name', flex: 1}, { header: '生日', sortable: true, dataIndex: 'birthday', renderer: Ext.util.Format.dateRenderer...

    ExtJs grid多选时获取选中的所有值

    var cmFatList = new Ext.grid.ColumnModel([ sm, // CheckboxSelectionModel { header: "ID", dataIndex: 'uid' }, { header: "Username", dataIndex: 'userName' }, { header: "Email", dataIndex: '...

Global site tag (gtag.js) - Google Analytics