extjs - grid - 自定义单元呈现方式(xtemplate)

Ext.create('Ext.grid.Panel', {
                title: '指标',
                region: 'center',
                store: me.cs_cmp_store,
                columns: [
                {
                    dataIndex: 'Group',
                    text: '分组',
                    width: 90,
                    renderer: function (v) {
                        return v + '1';
                    }
                },
....

http://www.iteye.com/topic/1121200

"[ ]"中可以写些逻辑代码，通过values可以获得本行的数据模型，此时dataIndex指定的值只作为排序用

{

                     xtype: 'templatecolumn',

                    dataIndex: 'Group',

                    text: '分值范围',

                    width: 90,

                    tpl: new Ext.XTemplate(

    '{[this.getMyValue(values)]}',

    {

        // XTemplate configuration:

        compiled: true,

        // member functions:

        getMyValue: function (values) {

            return values.MinScore + ' ~ ' + values.MaxScore;

        }

    }

)

},

...

//上面理解下方可以忽略-------------------------------------------------------------------------------------------------------

使用自定义函数

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="this.isGirl(name)">',
            '<p>Girl: {name} - {age}</p>',
        '</tpl>',
         // use opposite if statement to simulate 'else' processing:
        '<tpl if="this.isGirl(name) == false">',
            '<p>Boy: {name} - {age}</p>',
        '</tpl>',
        '<tpl if="this.isBaby(age)">',
            '<p>{name} is a baby!</p>',
        '</tpl>',
    '</tpl></p>',
    {
        // XTemplate configuration:
        compiled: true,
        // member functions:
        isGirl: function(name){
           return name == 'Sara Grace';
        },
        isBaby: function(age){
           return age < 1;
        }
    }
);
tpl.overwrite(panel.body, data);

"[ ]"中可以写些逻辑代码

{[this.cs_onclick(values.ppd_leftMenu, values.id)]}

cs_onclick: function (v, v1) {
                        //return 'Ext.getCmp(\'' + me.getId() + '\').cs_act_checkBoxClick(this.checked);';
                        return 'alert(\'' + v + '|' + v1 + '\')';
                    }

{[xindex % 2 === 0 ? "even" : "odd"]}