colMap: { id : 'invoiceListForDetail',
columns: [
{header: "票据ID", dataIndex: 'tobaccoBizAuditId', hidden: true},
{header: "发票编号", dataIndex: 'invoiceNo'},
{header: "开单时间", dataIndex: 'invoicingDate'},
{header: "重量", dataIndex: 'weight'},
{header: "金额", dataIndex: 'amount'},
{header: "审核状态", dataIndex: 'auditIsSucc', renderer: auditStateRender}
]
}
定义renderer 方法
var auditStateRender = function(value){
if (value == "0")
return "未审核";
else
return "已审核";
}
在Ext在调用renderer 方法时, 会向该方法传递以下参数:
ext api doc :
value : Object
单元格的数据值。The data value for the cell.
metadata : Object
单元格元数据(Cell metadata)对象。你也可以设置下列的属性:
css : String
单元格CSS样式字符串,作用在td元素上。
attr : String
一段HTML属性的字符串,将作用于表格单元格内的数据容器元素(如'style="color:red;"')。
record : Ext.data.record
从数据中提取的Ext.data.Record。
rowIndex : Number
行索引。Row index
colIndex : Number
列索引。Column index
store : Ext.data.Store
从Record中提取的Ext.data.Store对象。The Ext.data.Store object from which the Record was extracted.
在renderer方法中返回(return)的处理结果便是最终被显示在列上的数据.
分享到:
相关推荐
### Ext GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行的 JavaScript 框架,用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍...
在 `PersonListGridPanel` 示例中,我们创建了一个新的 `GridPanel` 组件,它包含了自定义的配置项,如渲染位置、大小、标题栏按钮以及列设置等。`constructor` 函数接收一个URL参数,但在这个示例中并未使用。通常...
renderTo: Ext.getBody() // 渲染到页面的body元素 }); ``` 此外,EXTJS的GridPanel还支持许多高级特性,例如: - **行编辑**: 可以通过添加RowEditor插件实现单元格级别的编辑。 - **分页**: 使用PagingToolbar...
`store`属性指定了数据源,`cm`设置了列模型,`renderTo`决定GridPanel将在页面的哪个元素内渲染。 EXTJS GridPanel的其他特性还包括: - **可编辑性**:通过`cellEditing`插件,我们可以实现单元格级别的编辑。 ...
2. **定义列模型**:使用`Ext.grid.ColumnModel`指定每列的配置。 3. **创建Grid**:使用`Ext.grid.GridPanel`组件。 ```javascript // 创建数据存储 var store = new Ext.data.ArrayStore({ fields: ['name', '...
列信息通过 `Ext.grid.ColumnModel` 定义,而数据存储器则通过 `Ext.data.Store` 定义。根据解析的数据类型不同,数据存储器又可以细分为 `JsonStore`、`SimpleStore` 和 `GroupingStore` 等几种类型。 下面是一个...
2. Ext.grid.EditorGridPanel:EditorGridPanel是Ext JS中的一种网格组件,它扩展了GridPanel,增加了单元格级别的编辑功能。用户可以直接在表格中修改数据,而无需跳转到单独的编辑页面。 二、核心特性 1. 可编辑...
在描述中提到,Ext2.0的Grid控件不仅美观,还支持多种数据格式,如二维数组、JSON和XML,甚至允许自定义数据类型。 Grid的核心组成部分包括ColumnModel(列模型)和Store(数据存储)。ColumnModel定义了表格的结构...
Grid组件在Ext2.0框架中主要用于展示表格形式的数据,支持多样的数据源类型,包括二维数组、JSON数据和XML数据,甚至是用户自定义的数据格式。这一灵活性得益于框架提供的`Ext.data.Store`,它作为数据与Grid间的...
例如,`Ext.grid.GridPanel` 是一个常用的组件,用于显示数据网格,而`Ext.tree.TreePanel`则用于展示层次结构的数据。 工具类是Ext JS中的另一个重要部分,它们提供了各种实用函数,如DOM操作、动画效果、事件处理...
JavaScript的Ext JS框架是用于构建富客户端Web应用的有力工具,其...在实际开发中,还可以根据需求进一步定制Grid Panel的行为,例如添加过滤、拖放排序、自定义列格式等功能,以满足复杂的数据展示和交互需求。
ExtJS的GridPanel组件远远不止这些功能,它还支持许多其他高级特性,例如自定义列的渲染器(renderer),以展示更复杂的数据;分组、过滤、聚合行数据;编辑单元格;配置拖放操作等。因此,即使是这个简单的教程也...
EXT时间控件可以轻松与其他EXT组件(如GridPanel、FormPanel等)集成,用于数据表单的输入或展示。同时,EXT支持Ajax和服务器端的数据交互,因此DateTimeField也能方便地配合服务器端进行数据验证和存储。 6. **...
- **自定义消息框**: 可以根据需求自定义样式和行为的消息框。 - **进度条对话框**: 显示任务进度的消息框。 3. **页面与脚本完全分离** - **Ext.onReady事件**: 该事件确保所有DOM元素加载完成后才执行指定的...
Ext2.0是一个JavaScript库,它提供了强大的数据展示能力,支持多种数据格式,如二维数组、JSON、XML,以及自定义数据类型。关键在于Ext.data.Store,它作为中间层,将各种格式的数据转化为Grid可以处理的形式。 ...
var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: "ID", width: 100, sortable: true, dataIndex: 'id'}, {header: "Name", width: 150, sortable: true, dataIndex: 'name'}, {header:...
4. **创建Grid Panel**:最后,使用上述配置创建GridPanel,指定渲染位置、数据存储、列模型和高度等属性: ```javascript var grid = new Ext.grid.GridPanel({ renderTo: "grid", store: ds, height: 600, ...
var gridPanel = Ext.create('Ext.grid.Panel', { title: '无全选框的Grid', store: store, columns: [/* 列配置 */], listeners: { render: function() { var hd_checker = this.getEl().select('div.x-grid...
- **组件渲染方法render**:讲解了render方法的原理,以及如何使用它来控制组件的渲染过程。 #### 第九章:按钮与日期选择器 - **按钮与日期选择器**:介绍了ExtJS中按钮和日期选择器组件的特性和用法,这些是最...
var grid = new Ext.grid.GridPanel({ store: new Ext.data.JsonStore({ url: 'data.json', id: 'id', fields: ['name', 'email'] }), columns: [ { header: 'Name', dataIndex: 'name' }, { header: 'Email...