效果图
比如我想在每一列中都加入“童鞋”和“传统模式”,并且把字体颜色改成红色
实现代码如下：
传统模式是在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()
});