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

  • 相关阅读:
    解决执行sql脚本报错:没有足够的内存继续执行程序。
    正则表达式学习
    art-template模板引擎循环嵌套
    textarea 设置最长字数和显示剩余字数
    display:table-cell
    js 发送 ajax 是数组 后台循环 发送json 到前台的方法
    js 函数内数据调用
    Angular 原文输出
    Angular 路由跳转
    JQ 按钮实现两种功能
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3239183.html
Copyright © 2011-2022 走看看