渲染
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <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' />"; } } function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) { var str = "<input type='button' value='查看详细信息' onclick='alert(\"" + "这个单元格的值是:" + value + "\\n" + "这个单元格的配置是:{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" + "这个单元格对应行的record是:" + record + ",一行的数据都在里边\\n" + "这是第" + rowIndex + "行\\n" + "这是第" + columnIndex + "列\\n" + "这个表格对应的Ext.data.Store在这里:" + store + ",随便用吧。" + "\")'>"; 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="../shared/examples.js"></script> <div id="grid"></div> </body> </html>
?行渲染,添加class
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <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-debug.js"></script> <script type="text/javascript" src="localXHR.js"></script> <title>03.grid</title> <style type="text/css"> .white-row{ background-color: white; } .red-row{ background-color: #F5C0C0 !important; } .yellow-row{ background-color: #FBF8BF !important; } .green-row{ background-color: #99CC99 !important; } </style> <script type="text/javascript"> Ext.onReady(function(){ var PersonRecord = Ext.data.Record.create([ {name: 'name', type: 'string'}, {name: 'sex', type: 'int'}, {name: 'color', type: 'string'} ]); var data = [ ['boy', 0, '#FBF8BF'], ['girl', 1, '#99CC99'], ['man', 0, '#F5C0C0'], ['woman', 1, '#FFFFFF'] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, PersonRecord) }); store.load(); var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: 'name', dataIndex: 'name'}, {header: 'sex', dataInex: 'sex'} ], autoHeight: true, renderTo: 'grid', viewConfig : { forceFit : true, enableRowBody : true, getRowClass :function(record, rowIndex, p, ds) { var cls = 'white-row'; switch (record.data.color) { case '#FBF8BF' : cls = 'yellow-row' break; case '#99CC99' : cls = 'green-row' break; case '#F5C0C0' : cls = 'red-row' break; } return cls; } } }); }); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> <div id="grid"></div> </body> </html>
?单元格渲染
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <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-debug.js"></script> <script type="text/javascript" src="localXHR.js"></script> <title>03.grid</title> <script type="text/javascript"> Ext.onReady(function(){ function renderMotif(data, cell, record, rowIndex, columnIndex, store){ var value = record.get('color') cell.attr = "style=background-color:" + value; return data; } var cm = new Ext.grid.ColumnModel([ {header: 'name', dataIndex: 'name'}, {header: 'sex', dataInex: 'sex'}, {header: 'color', dataIndex: 'color', renderer: renderMotif} ]); var PersonRecord = Ext.data.Record.create([ {name: 'name', type: 'string'}, {name: 'sex', type: 'int'}, {name: 'color', type: 'string'} ]); var data = [ ['boy', 0, '#FBF8BF'], ['girl', 1, '#FBF8BF'], ['man', 0, '#FBF8BF'], ['woman', 1, '#FBF8BF'] ]; var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, PersonRecord) }); store.load(); var grid = new Ext.grid.GridPanel({ store: store, cm: cm, autoHeight: true, renderTo: 'grid', viewConfig : { forceFit : true } }); }); </script> </head> <body> <script type="text/javascript" src="../shared/examples.js"></script> <div id="grid"></div> </body> </html>
?
?