`
韩悠悠
  • 浏览: 841851 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext.grid.ColumnModel renderer 参数介绍

阅读更多

使用时注意参数顺序位置:

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>&nbsp;元</span>';

   }

}, {

   header: "开房日期",

   tooltip: "开房具体日期",

   dataIndex: "OpenTodayTime",

   sortable: true

}]);

 

 

 

分享到:
评论

相关推荐

    Ext.grid.GridPanel属性祥解

    - 示例:`reconfigure(new Ext.data.JsonStore(...), new Ext.grid.ColumnModel([...]))` #### 四、Ext.grid.Column详解 `Ext.grid.Column`代表了表格中的一列,可以通过以下配置项来定义其行为和外观: 1. **id*...

    ExtJs表格点击超链接获取行的值

    在这个例子中,`renderer`函数接收了当前单元格的值、元数据、记录对象、行索引、列索引以及数据存储等参数。通过`record.get('link')`获取对应行的链接地址,然后将原始值包装成HTML超链接返回。 #### 二、获取...

    ext表格布局小例子

    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属性方法

    ### EXTGrid属性方法详解 #### 一、Ext.grid.GridPanel `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件,用于创建数据表格。以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的...

    ExtJs中处理后台传过来的date对象显示到页面上

    `renderer`参数接收一个日期格式化函数,`Ext.util.Format.dateRenderer('Y-m-d H:i:s')`表示日期将以'年-月-日 时:分:秒'的格式显示。 4. **创建GridPanel**: 最后,创建GridPanel并附加到ColumnModel和Store:...

    ext超酷的grid中放图片(ext3.2.1)

    在EXT JS 3.2.1版本中,Grid组件是一个非常强大的数据展示工具,它可以用于显示大量的结构化数据,并提供丰富的交互功能。标题"ext超酷的grid中放图片(ext3.2.1)"暗示了我们将探讨如何在EXT JS的Grid组件中嵌入和...

    ext 双层表格 grid(附带图片)

    创建双层表格的关键在于正确配置`Ext.grid.ColumnModel`。主表头下的次级表头可以通过在主表头的`columns`数组中添加子数组来实现。例如: ```javascript { header: '一级标题', columns: [ { header: '二级...

    ExtJS 使用grid显示数据

    3. **列模型(Column Model)**:定义Grid的列布局,`Ext.grid.ColumnModel`(在新版本中是`Ext.grid.header.Container`和`Ext.grid.column.Column`),设置每列的标题、数据绑定、宽度等属性。 4. **Grid Panel**...

    gridpanel的使用

    * `reconfigure(Ext.data.Store store, Ext.grid.ColumnModel colModel)`: 使用一个新的数据集和列模式重新配置表格组件。 Ext.grid.Column Ext.grid.Column 是 GridPanel 的一个子组件,用于定义表格的列结构。其...

    GridPanel属性详解

    最后,让我们了解一下`Ext.grid.ColumnModel`的关键配置项: 1. **columns** - **描述**:一个列配置数组,每个元素都是一个`Column`配置对象。 2. **defaultSortable/defaultWidth** - **描述**:分别控制...

    Ext Panel拼揍表格模板.rar

    var grid = Ext.create('Ext.grid.Panel', { store: store, columns: columnModel, title: '我的表格', width: 400, height: 300, renderTo: Ext.getBody() }); } }); ``` 在这个压缩包“Panel拼揍表格...

    extjs editgrid combobox 回显

    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 grid 合并行

    在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid ...

    string

    var columnModel = new Ext.grid.ColumnModel({ id: 'cm', defaultSortable: false, columns: [ { header: "Title", dataIndex: 'title' }, { header: "Bar", dataIndex: 'bar', renderer: bar } ] }); ```...

    extjs 学习笔记(三) 最基本的grid

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

    extjs3合并表头 rowspan

    2. **Column Model**: 在创建网格时,你需要定义一个列模型(`Ext.grid.ColumnModel`),其中包含了每列的信息,如宽度、对齐方式和数据字段。在合并表头的情况下,你可能需要在列模型中添加特殊标记或属性来指示...

    extjs3多表头

    多表头的实现基于Ext.grid.ColumnModel,它定义了表格列的配置和行为。在ExtJS 3中,你可以通过嵌套ColumnModel来创建多层表头。下面将详细介绍如何使用ExtJS 3创建多表头,以及相关的配置项和方法。 1. **创建多...

    extjs中grid中嵌入动态combobox的应用

    首先,要实现Grid中的ComboBox嵌入功能,需要了解几个关键组件:Ext.grid.EditorGridPanel、***boBox、Ext.grid.ColumnModel以及Ext.grid.RowNumberer。 Ext.grid.EditorGridPanel是一个专门用于编辑的Grid面板,它...

    一个EXT+js实现的Grid表格合并的例子源码

    4. **自定义Renderer**:EXT允许我们为Grid的每个单元格定义自定义渲染函数,通过这个函数,我们可以控制单元格的显示样式,实现合并效果。 5. **CSS样式调整**:在某些情况下,可能还需要通过CSS来调整单元格的...

Global site tag (gtag.js) - Google Analytics