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...
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...
2. 定义表格列:使用Ext.grid.ColumnModel或者Ext.grid.column.Column定义列的配置,包括标题、宽度、数据绑定等。 3. 创建表格:使用Ext.grid.Panel或Ext.view.Table创建表格视图,并将其与数据源关联。 4. 配置...
var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '性别', dataIndex: 'sex'}, {header: '名称', dataIndex: 'name'}, {header: '描述', dataIndex: 'descn'} ]); ``` ...
例如,`Ext.grid.ColumnModel`可以用来设置每一列的显示样式和数据源。 4. **Grid Panel**:实际展示Grid的组件,它包含了Store、Column Model和其他配置项。通过`Ext.grid.Panel`创建一个Grid,配置`store`为数据...
本文介绍了Ext2.0框架中Grid控件的基本使用方法,包括如何定义ColumnModel、创建Store以及如何在Grid中添加CheckBox。通过这些基本的操作,我们可以构建出功能丰富且交互性强的数据展示界面。Ext2.0的强大之处在于它...
var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '性别', dataIndex: 'sex'}, {header: '名称', dataIndex: 'name'}, {header: '描述', dataIndex: 'descn'} ]); cm....
### EXTGrid属性方法详解 #### 一、Ext.grid.GridPanel `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件,用于创建数据表格。以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的...
- **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用方法**: - `Ext.create()`: 创建一个组件实例...
var col=new Ext.grid.ColumnModel([{ header:"姓名", dataIndex:"name", menuDisabled:true, align:"center"}, {header:"年龄", dataIndex:"age", sortable:true, align:"center"}, {header:"性别", dataIndex:...
var cm = new Ext.grid.ColumnModel({ columns: [ {header: '姓名', dataIndex: 'name', flex: 1}, { header: '生日', sortable: true, dataIndex: 'birthday', renderer: Ext.util.Format.dateRenderer...
var cmFatList = new Ext.grid.ColumnModel([ sm, // CheckboxSelectionModel { header: "ID", dataIndex: 'uid' }, { header: "Username", dataIndex: 'userName' }, { header: "Email", dataIndex: '...
var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '性别', dataIndex: 'sex'}, {header: '名称', dataIndex: 'name'}, {header: '描述', dataIndex: 'descn'} ]); // 设置...