Extjs grid column裏添加button等html標籤,並增加點擊事件

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)找不到。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章