使用时注意参数顺序位置:
1. renderer:function (value, cellmeta, record, rowIndex, columnIndex, store) {
value :这个单元格的值;
cellmeta.cellId: 这个单元格的配置
cellmeta.id: id
record :这个单元格对应的record
rowIndex 这是第几行
store 这个表格对应的Ext.data.Store
}
2. 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;
}
使用实例:
//--------------------------------------------------列选择模式
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex: "openroomid"
});
//--------------------------------------------------列头
var cm = new Ext.grid.ColumnModel([
sm, {
header: "开房ID",
dataIndex: "openroomid",
tooltip: "开房唯一标识ID",
//列不可操作
//menuDisabled:true,
//可以进行排序
sortable: true
}, {
header: "房间号",
tooltip: "客人所住房间编号",
dataIndex: "roomid",
sortable: true,
renderer: function(value) {
return "<a herf='Default.aspx' target='_blank'>" + value + "</a>"
}
}, {
header: "所付定金",
tooltip: "客人所付定金",
dataIndex: "guestmoney",
sortable: true,
renderer: function(value) { //将数字转换为整数
if (value != null && value != "") {
var a, b, c, i
a = value.toString();
b = a.indexOf('.');
c = a.length;
if (b != -1)
a = a.substring(0, b);
}
if (b == -1) {
a = a + ".";
for (i = 1; i <= c; i++)
a = a - "0";
}
else {
a = a.substring(0, b + c + 1);
for (i = c; i <= b + c; i++) {
a = a - "0";
}
}
return '<span style="color:red;"><b>' + String.format("<font color=red>¥{0}</font>", a) + '</b> 元</span>';
}
}, {
header: "开房日期",
tooltip: "开房具体日期",
dataIndex: "OpenTodayTime",
sortable: true
}]);
分享到:
相关推荐
- 示例:`reconfigure(new Ext.data.JsonStore(...), new Ext.grid.ColumnModel([...]))` #### 四、Ext.grid.Column详解 `Ext.grid.Column`代表了表格中的一列,可以通过以下配置项来定义其行为和外观: 1. **id*...
var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, { header: '', dataIndex: 'id', width: 40 }, { header: '', dataIndex: 'name', width: 80 }, { header: 'Ա', dataIndex: 'sex', ...
### EXTGrid属性方法详解 #### 一、Ext.grid.GridPanel `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件,用于创建数据表格。以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的...
`renderer`参数接收一个日期格式化函数,`Ext.util.Format.dateRenderer('Y-m-d H:i:s')`表示日期将以'年-月-日 时:分:秒'的格式显示。 4. **创建GridPanel**: 最后,创建GridPanel并附加到ColumnModel和Store:...
在EXT JS 3.2.1版本中,Grid组件是一个非常强大的数据展示工具,它可以用于显示大量的结构化数据,并提供丰富的交互功能。标题"ext超酷的grid中放图片(ext3.2.1)"暗示了我们将探讨如何在EXT JS的Grid组件中嵌入和...
创建双层表格的关键在于正确配置`Ext.grid.ColumnModel`。主表头下的次级表头可以通过在主表头的`columns`数组中添加子数组来实现。例如: ```javascript { header: '一级标题', columns: [ { header: '二级...
3. **列模型(Column Model)**:定义Grid的列布局,`Ext.grid.ColumnModel`(在新版本中是`Ext.grid.header.Container`和`Ext.grid.column.Column`),设置每列的标题、数据绑定、宽度等属性。 4. **Grid Panel**...
* `reconfigure(Ext.data.Store store, Ext.grid.ColumnModel colModel)`: 使用一个新的数据集和列模式重新配置表格组件。 Ext.grid.Column Ext.grid.Column 是 GridPanel 的一个子组件,用于定义表格的列结构。其...
最后,让我们了解一下`Ext.grid.ColumnModel`的关键配置项: 1. **columns** - **描述**:一个列配置数组,每个元素都是一个`Column`配置对象。 2. **defaultSortable/defaultWidth** - **描述**:分别控制...
var grid = Ext.create('Ext.grid.Panel', { store: store, columns: columnModel, title: '我的表格', width: 400, height: 300, renderTo: Ext.getBody() }); } }); ``` 在这个压缩包“Panel拼揍表格...
var colM = new Ext.grid.ColumnModel([ { header: "Deal ID", dataIndex: "deal_id", sortable: true, width: 100 }, { header: "Process Name", dataIndex: "process_name", sortable: true, width: ...
在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid ...
var columnModel = new Ext.grid.ColumnModel({ id: 'cm', defaultSortable: false, columns: [ { header: "Title", dataIndex: 'title' }, { header: "Bar", dataIndex: 'bar', renderer: bar } ] }); ```...
var cm = new Ext.grid.ColumnModel([ {id:'company', header: "Company", width: 160, sortable: true, dataIndex: 'company'}, {header: "Price", width: 75, sortable: true, dataIndex: 'price'}, {header: ...
2. **Column Model**: 在创建网格时,你需要定义一个列模型(`Ext.grid.ColumnModel`),其中包含了每列的信息,如宽度、对齐方式和数据字段。在合并表头的情况下,你可能需要在列模型中添加特殊标记或属性来指示...
多表头的实现基于Ext.grid.ColumnModel,它定义了表格列的配置和行为。在ExtJS 3中,你可以通过嵌套ColumnModel来创建多层表头。下面将详细介绍如何使用ExtJS 3创建多表头,以及相关的配置项和方法。 1. **创建多...
首先,要实现Grid中的ComboBox嵌入功能,需要了解几个关键组件:Ext.grid.EditorGridPanel、***boBox、Ext.grid.ColumnModel以及Ext.grid.RowNumberer。 Ext.grid.EditorGridPanel是一个专门用于编辑的Grid面板,它...
4. **自定义Renderer**:EXT允许我们为Grid的每个单元格定义自定义渲染函数,通过这个函数,我们可以控制单元格的显示样式,实现合并效果。 5. **CSS样式调整**:在某些情况下,可能还需要通过CSS来调整单元格的...
var cm = new Ext.grid.ColumnModel([ sm, // 复选框列 new Ext.grid.RowNumberer({ header: "自动显示行号", width: 100 }), // 行号列 { header: '员工编号', dataIndex: 'EmployeeID', sortable: true, width...