转自:https://blog.csdn.net/u011530389/article/details/45821945

本文导读: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
....
该类有很多方法来操作列,具体查看API

五、一个比较完整的实例

 
 Ext.grid.ColumnModel([{
id: 列的唯一标识,可以用于定义css,如:(.x-grid-td-topic b { color:#333 })
header: 列的名称
dataIndex: 在store中本列值的索引
sortable: 设置本列是否支持排序
renderer: 列值的渲染函数,定义函数如:function renderName(value, cellmeta, record, rowIndex, columnIndex, store){}
width : 列宽
hidden:true 是否隐藏本列
}]);


//value是当前单元格的值
//cellmeta里保存的是cellId单元格id,id不知道是干啥的,似乎是列号,css是这个单元格的css样式。
//record是这行的所有数据,你想要什么,record.data["id"]这样就获得了。
//rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。
//columnIndex列号太简单了。
//store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,你都可以随便调用。

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value='查看详细信息' onclick='alert(""" +
"这个单元格的值是:" + value + "" +
"这个单元格的配置是:{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}""n" +
"这个单元格对应行的record是:" + record + ",一行的数据都在里边" +
"这是第" + rowIndex + "行" +
"这是第" + columnIndex + "列" +
"这个表格对应的Ext.data.Store在这里:" + store + ",随便用吧。" +
""")'>";
return str;
}

64. Extjs中grid 的ColumnModel 属性配置的更多相关文章

  1. Extjs中grid 的ColumnModel 属性配置

    一, 用数组的方式配置ColumnModel var colModel = new Ext.grid.ColumnModel([ { header:'编号', dataIndex:'id',width ...

  2. EXTJS中grid的数据特殊显示,不同窗口的数据传递

    //EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...

  3. Extjs中GridPanel的各个属性与方法

    1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充 ...

  4. Extjs中grid表格中去掉红三角

    在编辑Extjs的gridpanel的时候,数据有错误或是修改在每个单元格上都会出现红色的小三角,在每个列上面可以配置allowBlank: false来标识这个不可以为空 有的时候在保存数据时如果不 ...

  5. Extjs中grid前端分页使用PagingMemoryProxy【二】

        在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...

  6. NSS_07 extjs中grid在工具条上的查询

    碰到的每个问题, 我都会记下走过的弯路,尽量回忆白天的开发过程, 尽量完整, 以使自己以后可以避开这些弯路. 这个问题在系统中应用得比较多, 在一个gridpanel的工具条上有俩搜索框, panel ...

  7. NSS_04 extjs中grid接收datetime类型参数列

    今天在做用户列表时发现, asp.net mvc3的控制器在返回JsonResult结果时, 会把对象内的DateTime类型成员,解析为类似于\/Date(1238606590509)\/的格式 , ...

  8. Extjs中grid行的上移和下移

    一.将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 var up = new Ext.Action({ text : 'Up', icon : 'up.png',//或者添加 ...

  9. extjs中grid中行内文本或图片居中显示

    我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: <div id="weatherP_grid-body& ...

随机推荐

  1. A5. JVM 如何判断GC对象

    [概述] 在堆里面存放着 Java 世界中几乎所有的对象实例,垃圾收集器在对堆进行回收前,第一件事情就是要确定这些对象之中哪些还 “存活” 着,哪些已经 “死去”(即不可能再被任何途径使用的对象). ...

  2. Spring自定义拦截器

    HandlerInterceptorAdapter由Spring MVC提供,用来拦截请求. 实现自定义拦截器需要继承HandlerInterceptorAdapter或实现HandlerInterc ...

  3. MySQL基础:show命令总结

    show命令 show命令可以提供关于数据库.表.列,或关于服务器的状态信息. 总结 # 显示二进制文件以及文件大小(需要开启二进制日志记录功能) SHOW {BINARY | MASTER} LOG ...

  4. 深入理解DOM事件类型系列——剪贴板事件

    定义 剪贴板操作包括剪切(cut).复制(copy)和粘贴(paste)这三个操作,快捷键分别是ctrl+x.ctrl+c.ctrl+v.当然也可以使用鼠标右键菜单进行操作 对象事件 关于这3个操作共 ...

  5. 什么是restful

  6. 字符串hash-BKDRHash

    unsigned int BKDRHash(char *str) { unsigned ; // 31 131 1313 13131 131313 etc.. unsigned ; while (*s ...

  7. Butterfly

    Butterfly 时间限制:C/C++ 2秒,其他语言4秒空间限制:C/C++ 131072K,其他语言262144K64bit IO Format: %lld 题目描述 给定一个n*m的矩阵,矩阵 ...

  8. Modify MySQL dump file the fatest way

    使用mysql命令导入mysqldump生成的sql文件时,为了提高导入速度,往往需要修改dump文件,但是面对一个几十GB的文件,这事儿就太崩溃了,最快速的方法是这么做: ( echo " ...

  9. HDU 1085 多重背包转化为0-1背包问题

    题目大意: 给定一堆1,2,5价值的硬币,给定三个数表示3种价值硬币的数量,任意取,找到一个最小的数无法取到 总价值为M = v[i]*w[i](0<=i<3) 那么在最坏情况下M个数都能 ...

  10. 武大OJ 574. K-th smallest

    Description Give you a number S of length n,you can choose a position and remove the number on it.Af ...