iteye_9203
iteye_9203
2012-03-15 17:16

EXT Grid 相关问题,求指点,拜托

已采纳
最近项目里用Ext Grid ,现在有一段代码,其中三个参数我不清楚接收的到底是什么值,请教各位指点一下。

代码如下:

各位,不好意思,没有什么分,我没分了,请各位帮下忙吧,顺带熟悉熟悉或者加深印象也好对吧。谢谢

[code="javascript"]
Ext.onReady(function(){
var path = $("input[name=path]").val();

var sm = new Ext.grid.CheckboxSelectionModel({

});



//问题在此处!!!          javascript代码没找到办法标红,请各位伤眼细看一下。谢谢
//此函数的三个参数不清楚,求解释
var oper = function( val, cellmeta, record ){
    alert(val + "     ---     " + record + "     ===     " + cellmeta);
    //var templateId = record.get('id');
    var delBtn="<button onclick='delFloatIp()'>删除</button>";
    var assignBtn="<button onclick='assignFloatIp()'>分配</button>";
    return delBtn + "&emsp;" + assignBtn;
};



var cm= new Ext.grid.ColumnModel([
    //sm,
    {header: 'IP', dataIndex: 'ip', width: 250, align:'center', sortable: true},
    {header: 'Instance', dataIndex: 'instance', width: 300, align:'center', sortable: true},
    {header: '操作', dataIndex: 'oper', width: 300, align:'center', renderer:oper}
]);
var store = new Ext.data.JsonStore({
    url: path+'/internet/floating_list.action',
    autoLoad: true,
    totalProperty: 'totalCount',
    successProperty: 'success',
    root: 'list',
    baseParams: {start: 0, limit: 10},
    fields: [{name: 'id'},{name: 'ip'},{name: 'instance'}]
});
//页面布局部分
var globalPanel = new Ext.Panel({
    height: 395,
    layout: 'border',
    border: false,
    items:[{
        split: true,
        width: 200,
        height: 200,
        split: true,
        region:'center',
        contentEl: 'queryGrid',                          
        border: false                             
    }]
});
var grid = new Ext.grid.GridPanel({
    title: '',
    stripeRows: true,
    loadMask: true,
    border: true,
    height: 395,
    cm: cm,
    //sm: sm,
    store: store,
    bbar: new Ext.PagingToolbar({   
        pageSize: 10,
        store: store,   
        displayInfo: true,   
        displayMsg: '<s:text name="iros.common.grid.record.note"/>',//'当前第 {0} - {1} 条记录 / 共 {2} 条',
        emptyMsg: '<s:text name="iros.common.grid.emptyMsg.note"/>'//目前无相关数据
    })
});
grid.render('queryGrid');

});
[/code]

不明白的参数已经标明红色,请熟悉的朋友帮忙解释一下,三个参数接收的各是什么值。非常感谢。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • suziwen suziwen 9年前

    这个很好理解的
    函数
    [code="js"]var oper = function( val, cellmeta, record ){ [/code]
    调用入口是

    [code="js"]{header: '操作', dataIndex: 'oper', width: 300, align:'center', renderer:oper} [/code]
    而这代码归
    var cm= new Ext.grid.ColumnModel操作
    所以查看api
    Ext.grid.ColumnModel
    知道
    var colModel = new Ext.grid.ColumnModel([{},{}]);的另一种写法是
    var colModel = new Ext.grid.ColumnModel({
    columns: [{},{}]}

    同时columns在api是这样描述的

    [quote]columns : Array
    An Array of object literals. The config options defined by Ext.grid.Column are the options which may appear in the object literal for each individual column definition.[/quote]

    因此继续查找
    Ext.grid.Column 的api
    这个类的render又是这样的描述

    [code="js"]
    renderer : Mixed
    For an alternative to specifying a renderer see xtype
    Optional. A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it is rendered). This may be specified in either of three ways:
    A renderer function used to return HTML markup for a cell given the cell's data value.
    A string which references a property name of the Ext.util.Format class which provides a renderer function.
    An object specifying both the renderer function, and its execution scope (this reference) e.g.:
    {
    fn: this.gridRenderer,
    scope: this
    }
    If not specified, the default renderer uses the raw data value.
    For information about the renderer function (passed parameters, etc.), see Ext.grid.ColumnModel.setRenderer. An example of specifying renderer function inline:
    var companyColumn = {
    header: 'Company Name',
    dataIndex: 'company',
    renderer: function(value, metaData, record, rowIndex, colIndex, store) {
    // provide the logic depending on business rules
    // name of your own choosing to manipulate the cell depending upon
    // the data in the underlying Record object.
    if (value == 'whatever') {
    //metaData.css : String : A CSS class name to add to the TD element of the cell.
    //metaData.attr : String : An html attribute definition string to apply to
    // the data container element within the table
    // cell (e.g. 'style="color:red;"').
    metaData.css = 'name-of-css-class-you-will-define';
    }
    return value;
    }
    }[/code]

    所以就可以明白这些参数的含义了

    [quote]parameters:
    value : Object
    The data value for the cell.

    metadata : Object
    An object in which you may set the following attributes:

    css : String
    A CSS class name to add to the cell's TD element.

    attr : String
    An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').

    record : Ext.data.record
    The Ext.data.Record from which the data was extracted.

    rowIndex : Number
    Row index

    colIndex : Number
    Column index

    store : Ext.data.Store
    The Ext.data.Store object from which the Record was extracted.[/quote]

    点赞 评论 复制链接分享
  • works001 works001 9年前

    [code="java"]renderer : Function
    (可选)当该方法通过传递以下参数时,会返回可显示的数据:
    (可选)当该方法通过传递以下参数时,会返回可显示的数据:
    value : Object
    该单元格的数据值。

    metadata : Object
    一个对象,您可以在其中设置以下属性:

    css : String
    一个添加到该单元格的TD元素上的CSS样式名。

    attr : String
    一个定义HTML属性的字符串,应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。

    record : Ext.data.record
    从数据中提取的Ext.data.Record。

    rowIndex : Number
    行序号

    colIndex : Number
    列序号

    store : Ext.data.Store
    从该Ext.data.Store对象中提取记录。
    [/code]

    点赞 评论 复制链接分享

相关推荐