Ext.grid.GridPanel 显示数据
编写js文件
1. 数据,要显示到页面上的数据
var myData = [[1, { text: 'Ext', url: 'http://extjs.com' }, -10.00, '2008-01-01 12:01:01', 'br.gif', 'Atlantic Spadefish.jpg', { text: '一', tips: '提示1' } ], [ 2, { text: 'Google', url: 'http://www.google.cn' }, 1.00, '2008-02-16 12:01:02', 'fr.gif', 'Bat Ray.jpg', { text: '二', tips: '提示2' } ], [ 3, { text: '新浪', url: 'http://www.sina.com.cn' }, 0, '2008-03-15 12:01:03', 'cu.gif', 'Blue Angelfish.jpg', { text: '三', tips: '提示3' } ], [ 4, { text: '雅虎', url: 'http://www.yahoo.com.cn' }, 10.01, '2008-04-14 12:01:04', 'es.gif', 'Bluehead Wrasse.jpg', { text: '四', tips: '提示4' } ], [ 5, { text: 'CSDN', url: 'http://www.csdn.net' }, 200.90, '2008-05-13 12:01:05', 'cn.gif', 'Cabezon.jpg', { text: '五', tips: '提示5' } ] ];装载入Ext.data.SimpleStore
把数据装载到一个简单的Store中
var store = new Ext.data.SimpleStore({//设置 编号, 链接, 数字,时间,图标,图片提示,文字提示 fields: [ { name: 'id',type: 'int' //编号 },{ name: 'linker'//链接 },{ name: 'number',type: 'float'//数字 },{ name: 'datetime',type: 'date',dateFormat: 'Y-m-d H:i:s'//时间 },{ name: 'icon'//图标 },{ name: 'qtips'//图片提示 },{ name: 'tips'//文字提示 }] }); store.loadData(myData);用最常用的GridPanel显示数据
//定义方法，为数据载入表格时候有不同的显示 function leftPadfun(val){ return String.leftPad(val, 5, "0"); } /** * 根据text: , url 生产一条完整的链接 */ function linkerfun(val){ if (typeof val == 'object') { return '<a style="display:table;width:100%;" title="' + val.url + '" target="_blank" href="' + val.url + '">' + val.text + '</a>' } return val; } /** * 根据数值的大小分别显示不同的颜色 * 大于0显示为绿色 * 小于0 显示为红色 */ function numfun(val){ if (val > 0) { return '<span style="color:green;">' + val + '</span>'; } else if (val < 0) { return '<span style="color:red;">' + val + '</span>'; } return val; } /** * 得到图标的应用 */ function iconfun(val){ return '<img src="images/' + val + '">' } /** * 得到提示图片 * 添加qtip属性 * 要在HTML中使用QuickTip显示提示，只要在标记中加入qtip属性就可以了 * Ext.QuickTips.init();进行初始化 * */ function qtipsfun(val){ return '<span style="display:table;width:100%;" qtip=\'<img src="images/' + val + '">\'>' + val + '</span>' } /** * 包含提示的文字 */ function tipsfun(val){ if (typeof val == 'object') { return '<span style="display:table;width:100%;" title="' + val.tips + '">' + val.text + '</span>' } return val } var grid = new Ext.grid.GridPanel({ height: 350, width: 800, store: store, title: '自定义单元格的显示格式', frame: true, columns: [{ header: '编号', width: 80, sortable: true, renderer: leftPadfun, dataIndex: 'id' }, { header: "链接", width: 75, sortable: true, renderer: linkerfun, dataIndex: 'linker' }, { header: "数字", width: 75, sortable: true, renderer: numfun, dataIndex: 'number' }, { header: "时间", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'datetime' }, { header: "图标", width: 75, sortable: true, renderer: iconfun, dataIndex: 'icon' }, { header: "图片提示", width: 75, sortable: true, renderer: qtipsfun, dataIndex: 'qtips' }, { header: "文字提示", width: 75, sortable: true, renderer: tipsfun, dataIndex: 'tips' }], stripeRows: true, autoExpandColumn: 5, listeners: { //定义列单击时间监听// rowclick: function(trid, rowIndex, e){// Ext.get('op').dom.value += '------------------------\n' +// Ext.encode(store.getAt(rowIndex).data) +// '\n';// } rowclick : rowclickevent } }); // 对QuickTips进行初始化 Ext.QuickTips.init(); function rowclickevent(trid, rowIndex, e) { Ext.get('op').dom.value += '------------------------\n' + Ext.encode(store.getAt(rowIndex).data) + '\n'; }在html文件中显示出来
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>自定义单元格的显示格式</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入必要的Ext库文件--> <link rel="stylesheet" type="text/css" href="../Extjs/resources/css/ext-all.css" /> <!-- EXT LIB --> <script src="../Extjs/adapter/ext/ext-base.js"></script> <script src="../Extjs/ext-all.js"></script> <script type="text/javascript" src="1_Grid.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); Ext.Msg.minWidth = 300;//把表格加载到id为panell的div中 grid.render('panel1');// 设置textarea为空 Ext.get('op').dom.value = ""; }) </script> </head> <body> <h1 style="margin:20px 0px 0px 20px;">第4章 自定义单元格的显示格式</h1> <br/> <div style="padding-left:20px;"> <div id="panel1"> </div> <br> <div>事件：</div> <textarea id='op' rows="10" style="width:800px;"></textarea> <br/> </div> </body></html>