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显示不正常
- 示例:`reconfigure(new Ext.data.JsonStore(...), new Ext.grid.ColumnModel([...]))` #### 四、Ext.grid.Column详解 `Ext.grid.Column`代表了表格中的一列,可以通过以下配置项来定义其行为和外观: 1. **id*...
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...
var grid = Ext.create('Ext.grid.Panel', { store: store, columns: columns, renderTo: Ext.getBody() // 渲染到页面 }); ``` 接下来,我们需要为GridPanel添加双击事件监听器。在ExtJs中,我们可以使用`...
3. **配置Column Model**: 创建一个Ext.grid.ColumnModel,定义每列的属性,如text(列标题)、dataIndex(与Model字段关联)和width。 4. **创建Grid Panel**: 创建一个Ext.grid.Panel实例,将Store、Model和...
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...
在ExtJs框架中,我们经常需要在表格(`Ext.grid.Panel`)中显示超链接,并且当用户点击这些超链接时,能够获取到当前行的数据。为了实现这一功能,我们可以使用`renderer`函数对单元格进行自定义渲染。 **代码示例*...
标题中的“用ext propertyGrid做的小例子”表明这个压缩包包含了一个使用EXTJS库的Property Grid组件的示例。EXTJS是一个流行的JavaScript框架,用于构建富客户端Web应用程序,而Property Grid是一个数据展示组件,...
最后,让我们了解一下`Ext.grid.ColumnModel`的关键配置项: 1. **columns** - **描述**:一个列配置数组,每个元素都是一个`Column`配置对象。 2. **defaultSortable/defaultWidth** - **描述**:分别控制...
2. 定义表格列:使用Ext.grid.ColumnModel或者Ext.grid.column.Column定义列的配置,包括标题、宽度、数据绑定等。 3. 创建表格:使用Ext.grid.Panel或Ext.view.Table创建表格视图,并将其与数据源关联。 4. 配置...
本文将深入探讨Ext2.0框架下Grid的使用方法,涵盖其基本配置、数据绑定以及高级特性如CheckBox的集成,旨在帮助开发者快速掌握并高效利用这一工具。 #### Grid组件概述 Grid组件在Ext2.0框架中主要用于展示表格...
var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, { header: '', dataIndex: 'id', width: 40 }, { header: '', dataIndex: 'name', width: 80 }, { header: 'Ա', dataIndex: 'sex', ...
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 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
例如,`Ext.grid.ColumnModel`可以用来设置每一列的显示样式和数据源。 4. **Grid Panel**:实际展示Grid的组件,它包含了Store、Column Model和其他配置项。通过`Ext.grid.Panel`创建一个Grid,配置`store`为数据...
### EXTGrid属性方法详解 #### 一、Ext.grid.GridPanel `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件,用于创建数据表格。以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的...
Grid的核心在于`Ext.grid.GridPanel`类及其相关的配置项。 ##### 1. ColumnModel的定义 - **ColumnModel**:用于定义Grid的列布局,指定每一列的标题、数据索引和其他属性。 - 示例代码: ```javascript var cm...
本文介绍了Ext2.0框架中Grid控件的基本使用方法,包括如何定义ColumnModel、创建Store以及如何在Grid中添加CheckBox。通过这些基本的操作,我们可以构建出功能丰富且交互性强的数据展示界面。Ext2.0的强大之处在于它...
var cmFatList = new Ext.grid.ColumnModel([ sm, // CheckboxSelectionModel { header: "ID", dataIndex: 'uid' }, { header: "Username", dataIndex: 'userName' }, { header: "Email", dataIndex: '...