快捷導(dǎo)航

extjs render 用法介紹

更新時(shí)間：2013年09月11日 15:13:10 作者：

renderer可以格式化該列顯示的數(shù)據(jù)格式或者按照你自定義的腳本顯示最終數(shù)據(jù)樣子，個(gè)人是這么理解，如果你不是可以看下本文

 
var cm = new Ext.grid.ColumnModel( 
[ 
new Ext.grid.RowNumberer({ header: "", width: 20, align: 'center' }), 
{ header: '', align: 'center', dataIndex: 'AccountAndRoseID', width: 50, sortable: true, hidden: true }, 
{ header: '', align: 'center', dataIndex: 'UserAccountId', width: 50, sortable: true, hidden: true }, 
{ header: '帳號(hào)', align: 'center', dataIndex: 'UserAccountName', width: 200, sortable: true }, 
{ header: '角色名', align: 'center', dataIndex: 'UserRoleName', width: 200, sortable: true }, 
{ header: '狀態(tài)', align: 'center', dataIndex: 'UserAccountStateId', width: 200, sortable: true, hidden: true, renderer: function() } 
] 

renderer可以格式化該列顯示的數(shù)據(jù)格式或者按照你自定義的腳本顯示最終數(shù)據(jù)樣子（我目前是這么理解的）
先看下renderer: function()里的參數(shù)

復(fù)制代碼代碼如下:

 
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ 

}

1.value是當(dāng)前單元格的值
2.cellmeta里保存的是cellId單元格id，id不知道是干啥的，似乎是列號(hào)，css是這個(gè)單元格的css樣式。
3.record是這行的所有數(shù)據(jù)，你想要什么，record.data["id"]這樣就獲得了。
4.rowIndex是行號(hào)，不是從頭往下數(shù)的意思，而是計(jì)算了分頁(yè)以后的結(jié)果。
5.columnIndex列號(hào)太簡(jiǎn)單了。
6.store，這個(gè)厲害，實(shí)際上這個(gè)是你構(gòu)造表格時(shí)候傳遞的ds，也就是說(shuō)表格里所有的數(shù)據(jù)，你都可以隨便調(diào)用，唉，太厲害了。

網(wǎng)上找到一篇博文，非常不錯(cuò)，直觀明了：

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<meta http-equiv="Content-Type" c> 
<title>03.grid</title> 
<link rel="stylesheet" type="text/css"  /> 
<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function(){ 
/* 
var cm = new Ext.grid.ColumnModel([ 
{header:'編號(hào)',dataIndex:'id'}, 
{header:'性別',dataIndex:'sex',renderer:function(value){ 
if (value == 'male') { 
return "<span style='color:red;font-weight:bold;'>紅男</span>"; 
} else { 
return "<span style='color:green;font-weight:bold;'>綠女</span>"; 
} 
}}, 
{header:'名稱(chēng)',dataIndex:'name'}, 
{header:'描述',dataIndex:'descn'} 
]); 
*/ 
function renderSex(value) { 
if (value == 'male') { 
return "<span style='color:red;font-weight:bold;'>紅男</span><img src='user_male.png' />"; 
} else { 
return "<span style='color:green;font-weight:bold;'>綠女</span><img src='user_female.png' />"; 
} 
} 

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) { 
var str = "<input type='button' value='查看詳細(xì)信息' >"; 
return str; 
} 

var cm = new Ext.grid.ColumnModel([ 
{header:'編號(hào)',dataIndex:'id'}, 
{header:'性別',dataIndex:'sex',renderer:renderSex}, 
{header:'名稱(chēng)',dataIndex:'name'}, 
{header:'描述',dataIndex:'descn',renderer:renderDescn} 
]); 

var data = [ 
['1','male','name1','descn1'], 
['2','female','name2','descn2'], 
['3','male','name3','descn3'], 
['4','female','name4','descn4'], 
['5','male','name5','descn5'] 
]; 

var store = new Ext.data.Store({ 
proxy: new Ext.data.MemoryProxy(data), 
reader: new Ext.data.ArrayReader({}, [ 
{name: 'id'}, 
{name: 'sex'}, 
{name: 'name'}, 
{name: 'descn'} 
]) 
}); 
store.load(); 

var grid = new Ext.grid.GridPanel({ 
autoHeight: true, 
renderTo: 'grid', 
store: store, 
cm: cm 
}); 

}); 
</script> 
</head> 
<body> 
<script type="text/javascript" src="../examples.js"></script> 
<div id="grid"></div> 
</body> 
</html> 