Extjs grid添加一個(gè)圖片狀態(tài)或者按鈕的方法
更新時(shí)間：2014年04月03日 16:59:10 作者：
extjs的grid中我們經(jīng)常需要添加一個(gè)圖片狀態(tài)或者按鈕，下面將自己用過的一些方法與大家分享下
extjs的grid中我們經(jīng)常需要添加一個(gè)圖片狀態(tài)或者按鈕，總結(jié)一下自己用過的方法：
一、狀態(tài)表示：
renderer:function(value){
if(value==0){
return "<img src='images/icons/cancel.png'>";
}else if(value==1){
return "<img src='images/icons/accept.png'>";
}
return value;
}
在columns中列添加renderer標(biāo)識(shí)狀態(tài)，效果圖如下：
http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png
二、事件處理：
直接給img添加onclick事件：
<img style="cursor:pointer;" onclick="updateRecord(\''+sn+"@"+ss+"@"+record.get("standardId")+'\');" src=\'${ctx}/img/edit.png\' alt=\'明細(xì)維護(hù)\' title=\'明細(xì)維護(hù)\'>'
事件是將需要的數(shù)據(jù)傳遞過去。
還有一種方法就是給grid添加單元格點(diǎn)擊事件：
listeners: {
cellClick: viewDoc
}
function viewDoc(grid, rowIdx, colIdx, e) {
var action = e.getTarget().value;
}
這樣就可以得到點(diǎn)擊的單元格，再添加事件處理即可。
三、可以使用'actioncolumn'添加圖片按鈕
{header:'合格證',sortable:false,width:80,align:'center',scope:this,
xtype:
'actioncolumn',
items : [{
icon : '${ctx}/img/details.png',
tooltip : '顯示合格證',
handler : function(grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex);
//。。。
}
]}
這樣也可以在grid單元格中添加圖片。
一、狀態(tài)表示：
復(fù)制代碼 代碼如下:
renderer:function(value){
if(value==0){
return "<img src='images/icons/cancel.png'>";
}else if(value==1){
return "<img src='images/icons/accept.png'>";
}
return value;
}
在columns中列添加renderer標(biāo)識(shí)狀態(tài)，效果圖如下：
http://images.cnitblog.com/blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png
二、事件處理：
直接給img添加onclick事件：
復(fù)制代碼 代碼如下:
<img style="cursor:pointer;" onclick="updateRecord(\''+sn+"@"+ss+"@"+record.get("standardId")+'\');" src=\'${ctx}/img/edit.png\' alt=\'明細(xì)維護(hù)\' title=\'明細(xì)維護(hù)\'>'
事件是將需要的數(shù)據(jù)傳遞過去。
還有一種方法就是給grid添加單元格點(diǎn)擊事件：
復(fù)制代碼 代碼如下:
listeners: {
cellClick: viewDoc
}
function viewDoc(grid, rowIdx, colIdx, e) {
var action = e.getTarget().value;
}
這樣就可以得到點(diǎn)擊的單元格，再添加事件處理即可。
三、可以使用'actioncolumn'添加圖片按鈕
復(fù)制代碼 代碼如下:
{header:'合格證',sortable:false,width:80,align:'center',scope:this,
xtype:
'actioncolumn',
items : [{
icon : '${ctx}/img/details.png',
tooltip : '顯示合格證',
handler : function(grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex);
//。。。
}
]}
這樣也可以在grid單元格中添加圖片。
相關(guān)文章
Extjs中的GridPanel隱藏列會(huì)顯示在menuDisabled中解決方法
在Extjs中的GridPanel會(huì)有這樣的情況，隱藏列會(huì)顯示在menuDisabled中,但是這個(gè)一般沒有什么用處，只是用于后臺(tái)取值的作用,感興趣的朋友可以了解下啊，希望本文對(duì)你有所幫助2013-01-01
剛剛參加完公司的項(xiàng)目，第一次使用extjs編寫用戶界面還是有點(diǎn)頭痛，現(xiàn)在小花整理好了，希望為初學(xué)者做個(gè)參考。2009-12-12
Extjs中通過Tree加載右側(cè)TabPanel具體實(shí)現(xiàn)
用Extjs4.1來做界面，有關(guān)Extjs4.1資料在網(wǎng)上也相對(duì)來說較少，下面是具體的實(shí)現(xiàn)代碼1.左側(cè)的功能樹2.需要打開的對(duì)應(yīng)的view，有類似需求的朋友可以參考下哈2013-05-05
extjs grid設(shè)置某列背景顏色和字體顏色的方法
extjs grid設(shè)置某列背景顏色和字體顏色的方法，需要的朋友可以參考下。2010-09-09
在Ext官方的例子中只有下拉列表控件，但是在實(shí)際業(yè)務(wù)中只有下拉列表無法滿足需求的，對(duì)于剛使用Ext的人來說，自定義一個(gè)控件好難，下面是具體的實(shí)現(xiàn)2013-10-10
Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁(yè)面的代碼分享
鍵盤上的F5或者退格鍵等按鍵一般來說會(huì)觸發(fā)頁(yè)面的后退或者刷新事件,然而這些在前端用代碼是可以給屏蔽掉的,這里我們就來看一下Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁(yè)面的代碼分享2016-06-06
ExtJS Ext.MessageBox.alert()彈出對(duì)話框詳解
Ext.MessageBox是一個(gè)工具類，他繼承自O(shè)biect對(duì)象，用來生成各種風(fēng)格的信息提示對(duì)話框，Ext.Msg是該類的別名，使用Ext.MessageBox和用Ext.Msg效果是一樣的，而后者提供了更簡(jiǎn)單的方式。2010-04-04
Extjs學(xué)習(xí)筆記之八 繼承和事件基礎(chǔ)
只有有了事件，頁(yè)面才能真正的“活”起來。Extjs的事件也是經(jīng)過良好封裝的，對(duì)于事件的處理都由Ext.uitl.Observable類提供接口。2010-01-01
extjs 學(xué)習(xí)筆記（三） 最基本的grid
extjs的一個(gè)亮點(diǎn)就是提供了豐富的UI，使得沒有藝術(shù)細(xì)胞的程序員也能做出絢麗的界面。把所有的UI集中到一起，有好處也有壞處，好處是有了統(tǒng)一的風(fēng)格和接口，壞處是js文件過于龐大，使用extjs的最小集合也超過了500k，所以在有些項(xiàng)目中并不適用。2009-10-10
首先簡(jiǎn)單介紹一下ExtJs中的Date基本上就是PHP date函數(shù)的一個(gè)子集，表征了一個(gè)日期對(duì)象。廢話到此為止。2010-12-12