extjsgridrenderer用法

塗作權發表於2014-03-24
JS

今天在做專案時，需要在列表中的某列新增一個超連結，首先要取得當前選中行的資料，判斷資料型別，然後連結到不同的頁面，研究下。發現ExtJs提供了一個很強的方法如下：

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: `狀態`, align: `center`, dataIndex: `UserAccountStateId`, width: 200, sortable: true, hidden: true, renderer: function() }
]

renderer可以格式化該列顯示的資料格式或者按照你自定義的指令碼顯示最終資料樣子（我目前是這麼理解的）
先看下renderer: function()裡的引數

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

}
1.value是當前單元格的值
2.cellmeta裡儲存的是cellId單元格id，id不知道是幹啥的，似乎是列號，css是這個單元格的css樣式。
3.record是這行的所有資料，你想要什麼，record.data[“id”]這樣就獲得了。
4.rowIndex是行號，不是從頭往下數的意思，而是計算了分頁以後的結果。
5.columnIndex列號太簡單了。
6.store，這個厲害，實際上這個是你構造表格時候傳遞的ds，也就是說表格裡所有的資料，你都可以隨便呼叫，唉，太厲害了。

網上找到一篇博文，非常不錯，直觀明瞭：

<html>
<head>
<meta http-equiv=”Content-Type” c>
<title>03.grid</title>
<link rel=”stylesheet” type=”text/css” href=”http://www.cnblogs.com/../resources/css/ext-all.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>


相關文章