`
pk272205020
  • 浏览: 4969 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

Ext.grid.ColumnModel配置

    博客分类:
  • Ext
阅读更多
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 是否隐藏本列
}]);


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

来看看我们可以在render里用到多少参数:

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

相关推荐

    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 propertyGrid做的小例子

    标题中的“用ext propertyGrid做的小例子”表明这个压缩包包含了一个使用EXTJS库的Property Grid组件的示例。EXTJS是一个流行的JavaScript框架,用于构建富客户端Web应用程序,而Property Grid是一个数据展示组件,...

    GridPanel属性详解

    最后,让我们了解一下`Ext.grid.ColumnModel`的关键配置项: 1. **columns** - **描述**:一个列配置数组,每个元素都是一个`Column`配置对象。 2. **defaultSortable/defaultWidth** - **描述**:分别控制...

    Ext2.0框架的grid使用

    本文将深入探讨Ext2.0框架下Grid的使用方法,涵盖其基本配置、数据绑定以及高级特性如CheckBox的集成,旨在帮助开发者快速掌握并高效利用这一工具。 #### Grid组件概述 Grid组件在Ext2.0框架中主要用于展示表格...

    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 grid 动态添加字段、列扩展

    Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列

    ext的grid简易例子

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

    EXTGrid属性方法

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

    Ext2.0框架的Grid使用介绍

    Grid的核心在于`Ext.grid.GridPanel`类及其相关的配置项。 ##### 1. ColumnModel的定义 - **ColumnModel**:用于定义Grid的列布局,指定每一列的标题、数据索引和其他属性。 - 示例代码: ```javascript var cm...

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

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

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

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

    EXt 可以编辑的grid

    3. **创建Grid Panel**:接着,创建Grid Panel,并指定其列模型(ColumnModel),定义每一列的显示方式和宽度。对于可编辑的列,我们需要设置`editor`属性,指定编辑器类型,如TextField、ComboBox等。 4. **启用...

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

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

Global site tag (gtag.js) - Google Analytics