Ext JS - renderer 函數
renderer 函數是一個攔截者模式，用於改變渲染到單元格的值和樣式。
http://docs-devel.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer Ext JS 4.2 官方文檔
Defaults to: false
- value : Object
The data value for the current cell 當前單元格數據的值
- metaData : Object
A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style.
當前單元格的元數據集合，通過渲染器可以直接使用或者修改其部分屬性值，常用的屬性有：tdCls、tdAttr、style。
- record : Ext.data.Model
The record for the current row 單元格所在當前行的所有數據記錄（record）
- rowIndex : Number
The index of the current row 當前行號
- colIndex : Number
The index of the current column 當前列號
- store : Ext.data.Store
The data store 當前 grid 的數據集（store）
- view : Ext.view.View
The current view 當前 grid 所屬視圖（view）
- return : String
The HTML string to be rendered. 返回一個被渲染的 HTML 文本串
實戰案例：GridPanel 中，對 Columns 進行渲染，效果如下：
JSP 頁面 CSS（ext 頁面是通過當前 JSP 頁面，引入一條 js 文件，ext 代碼寫在此 js 中，構造 ext 界面）
<style type="text/css">
/** 企業信用評價結果公布復核等級名稱：黃牌藍牌等 */
.x-grid-cell.greencard {
background-color: #B6FFA8;
}
.x-grid-cell.bluecard {
background-color: #D7E7FC;
}
.x-grid-cell.yellowcard {
background-color: #FEFAD7;
}
.x-grid-cell.redcard {
background-color: #F4B6B6;
}
.x-grid-cell.blackcard {
background-color: #000000;
color:white;
}
</style>
Ext.grid.Panel 的 renderer 函數
{
text: ‘處理結果‘,
dataIndex: ‘fhdjmc‘, // 復核等級名稱
flex: 1,
renderer: function (value, metaData, record) {
if (value == null || value == ‘‘) {
return ‘無牌‘;
}
// tdCls: x-grid-cell的樣式
// 例如: x-grid-cell.greencard {background-color: #B6FFA8;}
metaData.tdCls = value == ‘綠牌‘ ? ‘greencard‘ : (value == ‘藍牌‘ ? ‘bluecard‘ : (value == ‘黃牌‘ ? ‘yellowcard‘ : (value == ‘紅牌‘) ? ‘redcard‘ : ‘blackcard‘));
return value;
}
}
Ext JS - renderer 函數