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]

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

答

这个很好理解的
函数
[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]

答

[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]

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

相关推荐