首页 > Js开发 > Extjs grid column里添加button等html标签,并增加点击事件

Extjs grid column里添加button等html标签,并增加点击事件

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

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

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

View里主要代码如下:

[javascript][/javascript] view plaincopy

  1. columns: [{
  2.                    header: 'Complex column',
  3.                    width: 90,
  4.                    renderer: function(value, cellmeta, record) {
  5.                     var display="Text";
  6.                     display+='</br>';
  7.                     display+='<input type="image"<span style="BACKGROUND-COLOR: #ffff00"> class="add"</span> src="extjs/resources/themes/images/spinner.gif" alt="Add" />';
  8.                     display+='<input type="image" <span style="BACKGROUND-COLOR: #ffff00">class="edit"</span> src="extjs/resources/themes/images/spinner.gif" alt="Edit">';
  9.                     display+='<input type="image" <span style="BACKGROUND-COLOR: #ffff00">class="delete"</span> src="extjs/resources/themes/images/spinner.gif" alt="Delete">';
  10.                        return display;
  11.                    }
  12.                }]

2. 在Controller里添加事件

[javascript][/javascript] view plaincopy

  1. init : function() {
  2.         console.log('The window was rendered');
  3.         this.control({
  4.             'ResultPage > grid[id=resultGrid]':{
  5.                 <span style="BACKGROUND-COLOR: #ffcccc">cellclick</span>:this.cellClick
  6.             }
  7.         });
  8.     },
  9.     cellClick : function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
  10.         console.log("cell clicked");
  11.         var add = <span style="BACKGROUND-COLOR: #ffff00">e.getTarget('.add');
  12. </span>     var edit = <span style="BACKGROUND-COLOR: #ffff00">e.getTarget('.edit');
  13. </span>     var del = <span style="BACKGROUND-COLOR: #ffff00">e.getTarget('.delete');
  14. </span>     if (<span style="BACKGROUND-COLOR: #ffcccc">add</span>) {
  15.             console.log("click add");
  16.         }
  17.         if(<span style="BACKGROUND-COLOR: #ffcccc">edit</span>){
  18.             console.log("click edit");
  19.         }
  20.         if(<span style="BACKGROUND-COLOR: #ffcccc">del</span>){
  21.             console.log("click del");
  22.         }
  23.     }

这里有一点要注意,html里用class标识,然后在事件里用getTarget('.add')去寻找。我尝试在html里用id,getTarget(id)找不到。


本文固定链接: http://www.devba.com/index.php/archives/2116.html | 开发吧

报歉!评论已关闭.