extjs render 用法介紹

2019-11-20 22:18:45

字體：大中小

供稿：網(wǎng)友

 
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: '帳號', 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不知道是干啥的，似乎是列號，css是這個單元格的css樣式。
3.record是這行的所有數(shù)據(jù)，你想要什么，record.data["id"]這樣就獲得了。
4.rowIndex是行號，不是從頭往下數(shù)的意思，而是計算了分頁以后的結(jié)果。
5.columnIndex列號太簡單了。
6.store，這個厲害，實際上這個是你構(gòu)造表格時候傳遞的ds，也就是說表格里所有的數(shù)據(jù)，你都可以隨便調(diào)用，唉，太厲害了。

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

復(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:'編號',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:'名稱',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='查看詳細信息' >"; 
return str; 
} 

var cm = new Ext.grid.ColumnModel([ 
{header:'編號',dataIndex:'id'}, 
{header:'性別',dataIndex:'sex',renderer:renderSex}, 
{header:'名稱',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> 