extjs grid renderer用法

時間 2021-04-09

標籤 javascript css html java ide spa orm htm blog 欄目 JavaScript 简体版

原文原文鏈接

今天在作項目時，須要在列表中的某列添加一個超連接，首先要取得當前選中行的數據，判斷數據類型，而後連接到不一樣的頁面，研究下。發現ExtJs提供了一個很強的方法以下： javascript

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() }
]css

renderer能夠格式化該列顯示的數據格式或者按照你自定義的腳本顯示最終數據樣子（我目前是這麼理解的）
先看下renderer: function()裏的參數html

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

}
1.value是當前單元格的值
2.cellmeta裏保存的是cellId單元格id，id不知道是幹啥的，彷佛是列號，css是這個單元格的css樣式。
3.record是這行的全部數據，你想要什麼，record.data["id"]這樣就得到了。
4.rowIndex是行號，不是從頭往下數的意思，而是計算了分頁之後的結果。
5.columnIndex列號太簡單了。
6.store，這個厲害，實際上這個是你構造表格時候傳遞的ds，也就是說表格裏全部的數據，你均可以隨便調用，唉，太厲害了。ide

網上找到一篇博文，很是不錯，直觀明瞭：ui

<html>
<head>
<meta http-equiv=」Content-Type」 c>
<title>03.grid</title>
<link rel=」stylesheet」 type=」text/css」 href=」../../../resources/css/ext-all.css」 />
<script type=」text/javascript」 src=」../../adapter/ext/ext-base.js」></script>
<script type=」text/javascript」 src=」../../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’ />」;
}
}spa

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = 「<input type=’button’ value=’查看詳細信息’ >」;
return str;
}orm

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

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

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>