Extjs裏有個actioncolumn,但actioncolumn只能添加一系列button,不能既有字又有button
如何能在column裏增加html標籤,並給button添加事件呢?
1. 首先,在column裏重寫renderer方法,方法裏拼html語句
View裏主要代碼如下:
columns: [{
header: 'Complex column',
width: 90,
renderer: function(value, cellmeta, record) {
var display="Text";
display+='</br>';
display+='<input type="image" class="add" src="extjs/resources/themes/images/spinner.gif" alt="Add" />';
display+='<input type="image" class="edit" src="extjs/resources/themes/images/spinner.gif" alt="Edit">';
display+='<input type="image" class="delete" src="extjs/resources/themes/images/spinner.gif" alt="Delete">';
return display;
}
}]
2. 在Controller裏添加事件
init : function() {
console.log('The window was rendered');
this.control({
'ResultPage > grid[id=resultGrid]':{
cellclick:this.cellClick
}
});
},
cellClick : function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
console.log("cell clicked");
var add = e.getTarget('.add');
var edit = e.getTarget('.edit');
var del = e.getTarget('.delete');
if (add) {
console.log("click add");
}
if(edit){
console.log("click edit");
}
if(del){
console.log("click del");
}
}
這裏有一點要注意,html裏用class標識,然後在事件裏用getTarget('.add')去尋找。我嘗試在html裏用id,getTarget(id)找不到。