人EXTjs grid 超鏈接

Ext.onReady(function(){
var data = [[1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com'], [2, 'jfox', 'huihoo', 'www.huihoo.org'], [3, 'jdon', 'jdon', 'www.jdon.com'], [4, 'springside', 'springside', 'www.springside.org.cn']];
var store = new Ext.data.SimpleStore({
data: data,
fields: ["id", "name", "organization", "homepage"]
});
var colM = new Ext.grid.ColumnModel([{
header: "項目名稱",
dataIndex: "name",
sortable: true
}, {
header: "開發團隊",
dataIndex: "organization",
sortable: true
}, {
header: "網址",
dataIndex: "homepage",
renderer:showUrl
}]);
var grid = new Ext.grid.GridPanel({
renderTo: "hello",
title: "中國Java開源產品及團隊",
height: 200,
width: 600,
cm: colM,
store: store,
autoExpandColumn: 2
});
});
function showUrl(value)
{
return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";}

注意這裏的showUrl函數！


resultRenderer: function (value) {
return '<a href="http://www.example.com/" οnclick="some_function()" >查看</a>';
}


我們經常會給GridPanel中的某一個column加一個renderer，讓它的內容可以變成一個鏈接，例如：

resultRenderer: function (value) {
return '<a href="http://www.example.com/" οnclick="some_function()" >查看</a>';
}

這樣在Grid中，查看那兩個字就變成鏈接了

如果點擊這個查看的時候，想彈出窗口，那麼我們最普通的方式，就是給鏈接加一個onclick響應函數，

onclick這裏調用的函數，必然是通過全局的方式了，這樣做有個缺點，就是全局函數的擴散，造成可維護性下降


其實，有一種更合理的處理辦法，不論renderer中生成的是鏈接，還是其他的內容比如button，都是通用的

代碼如下

首先給grid添加一個cellclick事件的響應函數

grid.on('cellclick', grid.onCellClick, grid);

響應函數中做如下處理

onCellClick: function (grid, rowIndex, columnIndex, e) {
if (e.getTarget().innerHTML === '查看' ) { //藉助事件的target來判斷，這裏是鏈接可以這樣判斷，其他方式亦可
var record = grid.getStore().getAt(rowIndex); // Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
var data = record.get(fieldName);//這個data就是點擊的單元格的數據了，一定有用的

if (fieldName == 'this_column') {
//如果是這一列，做這個事
}

if (fieldName === 'that_column') {
//如果是另外一列，做另外的事
}
}
}