ExtJs6 Grid里渲染样式

效果图

比如我想在每一列中都加入“童鞋”和“传统模式”,并且把字体颜色改成红色

实现代码如下：

传统模式是在renderer里写方法实现样式或者增加内容

 新版本可以用  xtype: 'templatecolumn'  和 tpl 属性控制模版的属性用于渲染

 

Ext.create('Ext.data.Store', {
    storeId:'employeeStore',
    fields:['firstname', 'lastname', 'seniority', 'department'],
    groupField: 'department',
    data:[
        { firstname: "Michael", lastname: "Scott",   seniority: 7, department: "Management" },
        { firstname: "Dwight",  lastname: "Schrute", seniority: 2, department: "Sales" },
        { firstname: "Jim",     lastname: "Halpert", seniority: 3, department: "Sales" },
        { firstname: "Kevin",   lastname: "Malone",  seniority: 4, department: "Accounting" },
        { firstname: "Angela",  lastname: "Martin",  seniority: 5, department: "Accounting" }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Column Template Demo',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
         { text: 'Full Name',        dataIndex : 'firstname', flex:1, renderer : function(value) { return value +'传统模式'} },
         { text: 'Full Name',       xtype: 'templatecolumn', tpl: '{firstname} {lastname} 童鞋', flex:1 },
         { text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '<span style="color:red">{department}</span> ({seniority})', flex:1 }
    ],
    height: 400,
    width: 600,
    renderTo: Ext.getBody()
});