《Ext详解与实践》节选:自定义单元格的显示格式
有時候，需要在Grid中顯示一個鏈接，或根據數字的大小顯示不同的顏色，又或者使用固定格式顯示記錄編號等，這就需要自定義單元格的顯示格式。在Ext的Grid可以很容易的實現自定義單元格的顯示格式。在定義Grid的ColumnModel的時候，在需要自定義顯示格式的列中加入參數renderer，該參數指向一個函數，在顯示時會以函數返回的數據作為顯示數據，例如最簡單的就是定義日期的顯示格式：
| {header: "創建時間", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'createtime'} |
?
參數renderer指向的是一個函數，在函數中傳入該單元格的值，函數執行后返回要顯示的數據。
下面通過例子來演示一下常用的自定義格式：
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html debug='true'> <head> ? <title>自定義單元格的顯示格式</title> ???????? <meta http-equiv="content-type" content="text/html; charset=utf-8"> ???????? <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" /> ??????? <script type="text/javascript" src="../lib/ext/ext-base.js"></script> ? <script type="text/javascript" src="../lib/ext/ext-all.js"></script> ? <script type="text/javascript" src="../lib/ext/locale/ext-lang-zh_CN.js"></script> ? <style> ??????? </style> </head> <body> ???????? <h1 style="margin:20px 0px 0px 20px;">第4章 自定義單元格的顯示格式</h1> ???????? <br /> ???????? <div style="padding-left:20px;"> <p> ??? <div id="panel1"></div><br> ??? <div >事件：</div> ??? <textarea id='op' rows="10" style="width:800px;"></textarea> </p> <br /> </div> <script> ???????? var app={}; ???????? ???????? Ext.onReady(function(){ ? ??? Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); ? ??? Ext.QuickTips.init(); ?????????????????? Ext.Msg.minWidth=300; ? ??? 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'}], ??????? [6,{text:'微軟',url:'http://www.microsoft.com'},-200.01,'2008-06-12 12:01:06','us.gif','California Moray.jpg',{text:'六',tips:'提示6'}] ??? ]; ? ??? 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); ? ? ?????????????????? function leftPad(val){ ??????????????????????????? return String.leftPad(val,5,"0"); ?????????????????? } ?????????????????? ?????????????????? function linker(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; ?????????????????? } ? ??? function num(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 icon(val){ ??? return '<img src="./images/gif/'+val+'">' ??? } ??? ??? function qtips(val){ ??? return '<span style="display:table;width:100%;" qtip=/'<img src="images/'+val+'">/'>'+val+'</span>' ??? } ??? ??? function tips(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:leftPad, dataIndex:'id'}, ??????? {header: "鏈接", width:75, sortable: true, renderer: linker, dataIndex: 'linker'}, ??????? {header: "數字", width:75, sortable: true,renderer: num, dataIndex: 'number'}, ??????? {header: "時間", width:85, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'datetime'}, ??????? {header: "圖標", width:75, sortable: true,renderer: icon, dataIndex: 'icon'}, ??????? {header: "圖片提示", width:75, sortable: true,renderer: qtips, dataIndex: 'qtips'}, ??????? {header: "文字提示", width:75, sortable: true,renderer: tips, 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'; ????? ?????? } ??? } ????? ??? }); ? ??? grid.render('panel1'); ? ? ?????????????????? Ext.get('op').dom.value=""; ???????? }) </script> </body> </html> |
?
例子的運行結果如下圖。
?
例子中，第1列演示了以固定長度為5位，不足5位以0補齊的格式的數字：
| ?????????????????? function leftPad(val){ ??????????????????????????? return String.leftPad(val,5,"0"); ?????????????????? } |
?
該函數使用Ext字符串leftPad方法補0，然后將轉換后的值返回。
第2列演示了如何在單元格中顯示鏈接：
| ?????????????????? function linker(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; ?????????????????? } |
?
第2列的數據使用了JSON格式的數據，如“{text:'Ext',url:'http://extjs.com'}”，標簽text內的值是單元格顯示的數據，而標簽url的值是鏈接地址。在函數中先判斷原始值是否為對象，如果是則使用text和url組合一個HTML標記并返回。在HTML標記中定義了兩個樣式，其目的是讓HTML標記顯示時能填滿單元格，這樣當鼠標移動到該單元格空白處時，也能顯示提示信息。提示信息由HTML標記的title屬性實現。
第3列則演示了根據數值的大小使用不同顏色作為顯示文字的顏色，該單元格中負數顯示為紅色，0為黑色，正數為綠色：
| ??? function num(val){ ??????? if(val > 0){ ??????????? return '<span style="color:green;">' + val + '</span>'; ??????? }else if(val < 0){ ??????????? return '<span style="color:red;">' + val + '</span>'; ??????? } ??????? return val; ??? } |
?
函數中控制顏色的顯示是通過HTML標記SPAN的樣式實現的。
第4列很簡單，使用了Ext的日期格式函數控制日期的顯示格式。在這里要特別注意的是日期的值格式與store字段中定義的格式一定要相同，不然Grid會顯示為空白值。例如例子中的日期值為“2008-01-01 12:01:01”，則定義日期的格式必須為“Y-m-d H:i:s”。
第5列演示了如何在單元格中顯示小圖片：
| ??? function icon(val){ ??? return '<img src="./images/gif/'+val+'">' ??? } |
?
函數將包含圖片文件名的原始值轉換為HTML標記IMG，就可實現在單元格內顯示圖片了。
第6列演示了通過Ext的QuickTip顯示圖片提示：
| ??? function qtips(val){ ??? return '<span style="display:table;width:100%;" qtip=/'<img src="images/'+val+'">/'>'+val+'</span>' ??? } |
?
要在HTML標記中使用QuickTip顯示提示，只要在標記中加入一個屬性qtip就行了。在函數中可以看到將一個IMG標記作為了qtip的顯示內容。不過，別忘了在OnReady函數中對QuickTip進行初始化。標記SPAN也定義了兩個樣式，其作用與第2列的一樣。該列的提示顯示結果請看如下圖。
?
第7列使用了HTML標記的title屬性來顯示提示，與第2列的方法是一樣的，只是該列使用了SPAN標記。
本節只是簡單的演示了幾種自定義顯示格式的單元格，只要靈活使用HTML標記，還可以實現更多的自定義格式總結
以上是生活随笔為你收集整理的《Ext详解与实践》节选:自定义单元格的显示格式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 平板集热器的集热量和热效率计算的Pyth
- 下一篇： 如何部署服务器虚拟化,vmware服务器