extjs render 用法介紹_extjs-js教程-PHP中文網

首頁

web前端

js教程

extjs render 用法介紹_extjs

May 16, 2016 pm 05:22 PM

extjs render

複製程式碼程式碼如下:

 
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(function,function( 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> 
 
<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:ボールド;'>红男</span><img src='user_male.png' />"; 
} else { 
return "<span style='color:green;font- Weight:bold;'>绿女</span><img src='user_girl.png' />"; 
} 
} 

function renderDescn(value, cellmeta, Record、rowIndex、columnIndex、store) { 
var str = "<input type='button' value='查看详细信息' >"; 
return 
} 

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','女性','name2','descn2' ]、
['3'、'男性'、'名前3'、'説明3']、
['4'、'女性'、'名前4'、'説明4']、
['5 ','男性','name5','descn5'] 
]; 

var store = new Ext.data.Store({ 
プロキシ: new Ext.data.MemoryProxy(data), 
リーダー: new Ext.data.ArrayReader({}, [ 
 >{名前: 'id'}、
{名前: '性別'}、
{名前: '名前'}、
{名前: '説明'} 
]) 
} ); 
store.load(); 

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

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