zoukankan      html  css  js  c++  java
  • Extjs grid column里添加button等html标签,并增加点击事件

    Extjs里有个actioncolumn,但actioncolumn只能添加一系列button,不能既有字又有button

    如何能在column里增加html标签,并给button添加事件呢?

    1. 首先,在column里重写renderer方法,方法里拼html语句

    View里主要代码如下:

     columns: [{
                        header: 'Complex column',
                         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)找不到。

  • 相关阅读:
    POJ 2251 Dungeon Master(bfs)
    POJ 3275 Catch That Cow(bfs)
    POJ 3984 迷宫问题(bfs+路径记录)
    POJ 3620 Avoid The Lakes
    ZOJ 2100 Seeding
    POJ 2245 Lotto
    HDU 1181 变形课
    dedecms网站栏目增加缩略图的方法-测试通过
    dedecms缩略图模糊终极完美解决办法
    dedecms 留言板中引用模板文件方法
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3239183.html
Copyright © 2011-2022 走看看