`
solon.jar
  • 浏览: 45490 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Ext GridPanel 自定义列的Render

阅读更多

 

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 GridPanel 中实现加链接操作 在前端开发领域中,Ext JS 是一款非常流行的 JavaScript 框架,用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍...

    Ext 实现自定义控件

    在 `PersonListGridPanel` 示例中,我们创建了一个新的 `GridPanel` 组件,它包含了自定义的配置项,如渲染位置、大小、标题栏按钮以及列设置等。`constructor` 函数接收一个URL参数,但在这个示例中并未使用。通常...

    EXTJSEXT实例GridPanel.

    renderTo: Ext.getBody() // 渲染到页面的body元素 }); ``` 此外,EXTJS的GridPanel还支持许多高级特性,例如: - **行编辑**: 可以通过添加RowEditor插件实现单元格级别的编辑。 - **分页**: 使用PagingToolbar...

    Extjs2.02 Gridpanel

    `store`属性指定了数据源,`cm`设置了列模型,`renderTo`决定GridPanel将在页面的哪个元素内渲染。 EXTJS GridPanel的其他特性还包括: - **可编辑性**:通过`cellEditing`插件,我们可以实现单元格级别的编辑。 ...

    ext 编程开发指南

    2. **定义列模型**:使用`Ext.grid.ColumnModel`指定每列的配置。 3. **创建Grid**:使用`Ext.grid.GridPanel`组件。 ```javascript // 创建数据存储 var store = new Ext.data.ArrayStore({ fields: ['name', '...

    Ext表格控件和树控件

    列信息通过 `Ext.grid.ColumnModel` 定义,而数据存储器则通过 `Ext.data.Store` 定义。根据解析的数据类型不同,数据存储器又可以细分为 `JsonStore`、`SimpleStore` 和 `GroupingStore` 等几种类型。 下面是一个...

    可编辑表格Ext.grid.EditorGridPanel

    2. Ext.grid.EditorGridPanel:EditorGridPanel是Ext JS中的一种网格组件,它扩展了GridPanel,增加了单元格级别的编辑功能。用户可以直接在表格中修改数据,而无需跳转到单独的编辑页面。 二、核心特性 1. 可编辑...

    Ext2.0示例讲解

    在描述中提到,Ext2.0的Grid控件不仅美观,还支持多种数据格式,如二维数组、JSON和XML,甚至允许自定义数据类型。 Grid的核心组成部分包括ColumnModel(列模型)和Store(数据存储)。ColumnModel定义了表格的结构...

    Ext2.0框架的grid使用

    Grid组件在Ext2.0框架中主要用于展示表格形式的数据,支持多样的数据源类型,包括二维数组、JSON数据和XML数据,甚至是用户自定义的数据格式。这一灵活性得益于框架提供的`Ext.data.Store`,它作为数据与Grid间的...

    Ext2.1API中文文档

    例如,`Ext.grid.GridPanel` 是一个常用的组件,用于显示数据网格,而`Ext.tree.TreePanel`则用于展示层次结构的数据。 工具类是Ext JS中的另一个重要部分,它们提供了各种实用函数,如DOM操作、动画效果、事件处理...

    JavaScript的Ext JS框架中的GridPanel组件使用指南

    JavaScript的Ext JS框架是用于构建富客户端Web应用的有力工具,其...在实际开发中,还可以根据需求进一步定制Grid Panel的行为,例如添加过滤、拖放排序、自定义列格式等功能,以满足复杂的数据展示和交互需求。

    ExtJS 2.0 GridPanel基本表格简明教程

    ExtJS的GridPanel组件远远不止这些功能,它还支持许多其他高级特性,例如自定义列的渲染器(renderer),以展示更复杂的数据;分组、过滤、聚合行数据;编辑单元格;配置拖放操作等。因此,即使是这个简单的教程也...

    EXT 时间控件 3.0以上使用

    EXT时间控件可以轻松与其他EXT组件(如GridPanel、FormPanel等)集成,用于数据表单的输入或展示。同时,EXT支持Ajax和服务器端的数据交互,因此DateTimeField也能方便地配合服务器端进行数据验证和存储。 6. **...

    Ext-JS框架中文文档

    - **自定义消息框**: 可以根据需求自定义样式和行为的消息框。 - **进度条对话框**: 显示任务进度的消息框。 3. **页面与脚本完全分离** - **Ext.onReady事件**: 该事件确保所有DOM元素加载完成后才执行指定的...

    第三方控件Coolite使用教程

    Ext2.0是一个JavaScript库,它提供了强大的数据展示能力,支持多种数据格式,如二维数组、JSON、XML,以及自定义数据类型。关键在于Ext.data.Store,它作为中间层,将各种格式的数据转化为Grid可以处理的形式。 ...

    ext 开发指南 ext基础教程

    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:...

    ExtJS 配置和表格控件使用

    4. **创建Grid Panel**:最后,使用上述配置创建GridPanel,指定渲染位置、数据存储、列模型和高度等属性: ```javascript var grid = new Ext.grid.GridPanel({ renderTo: "grid", store: ds, height: 600, ...

    去掉gridPanel表头全选框的小例子

    var gridPanel = Ext.create('Ext.grid.Panel', { title: '无全选框的Grid', store: store, columns: [/* 列配置 */], listeners: { render: function() { var hd_checker = this.getEl().select('div.x-grid...

    Ext中文文档

    - **组件渲染方法render**:讲解了render方法的原理,以及如何使用它来控制组件的渲染过程。 #### 第九章:按钮与日期选择器 - **按钮与日期选择器**:介绍了ExtJS中按钮和日期选择器组件的特性和用法,这些是最...

    Ext拖动实例树和表格全

    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...

Global site tag (gtag.js) - Google Analytics