Extjs的grid的单元格中加载超链接和按钮

效果：

 

 

户型图列显示的图片实际上就是一个超链接。

添加一个Button分2个步骤：
1.在列头中定义超链接列或者Button列的HTML代码，也就是Render
 
2.添加该Button的事件处理函数。其中，gridPanel应作为参数传入该函数。

  应该在gridPanel初始化时定义:
  (1)cellClick的listener：cellClick
  (2)cellClick事件的处理函数：onCellClick

 

列头定义的代码如下：

    var cm = new Ext.grid.ColumnModel([sm,      new Ext.grid.RowNumberer(), //自动添加行号         {         header: "房间编号",         dataIndex: "RoomNumber",         //可以进行排序          sortable: true     }, {         header: "户型结构",         dataIndex: "huxingjiegou",         //可以进行排序         isHidden: true,         sortable: true     }, {         header: "面积(M²)",         dataIndex: "area",         //可以进行排序         sortable: true     }, {         header: "单价(元/M²)",         dataIndex: "singlePrice",         //可以进行排序         sortable: true         //           editor: new Ext.grid.GridEditor(new Ext.form.NumberField({         //            allowBlank: false         //        }))     }, {         header: "总价(元)",         dataIndex: "totalPrice",         //可以进行排序         sortable: true     }, {         header: "面积(M²)",         dataIndex: "mianjiCC",         //可以进行排序         sortable: true     }, {         header: "单价(元/M²)",         dataIndex: "priceCCS",         //可以进行排序         sortable: true         //           editor: new Ext.grid.GridEditor(new Ext.form.NumberField({         //            allowBlank: false         //        }))     }, {         header: "总价(元)",         dataIndex: "totalPriceCCS",         //可以进行排序         sortable: true     }, {         header: "面积(M²)",         dataIndex: "mianjiCK",         //可以进行排序         sortable: true     }, {         //         header: "单价(元/M²)",         header: "总价(元/M²)",         dataIndex: "priceCK",         //可以进行排序         sortable: true         //           editor: new Ext.grid.GridEditor(new Ext.form.NumberField({         //            allowBlank: false         //        }))     },      {          header: "",          dataIndex: "totalPriceALL",          //可以进行排序          sortable: true      },  {      header: "户型图",      tooltip: "户型图",      width: 120,      locked: true,      menuDisabled: true,      sortable: false,      dataIndex: "huxingPic",      renderer: function (data, metadata, record, rowIndex, columnIndex, store) {          var picture = store.getAt(rowIndex).get('huxingPic');          return '<a href="' + picture + '">' + '<img src="' + picture + '"width=60 hight=50> </a>';      }  },     {         header: "订购",         renderer: function (value, meta, record) {             var formatStr = "<button  onclick='javscript:return false;' class='order_bit'>订购</button>";              var resultStr = String.format(formatStr);             return "<div class='controlBtn'>" + resultStr + "</div>";         } .createDelegate(this),         css: "text-align:center;",         //  width: 30,            sortable: false     }        ]);

注意超链接为'<a href="' + picture + '">'，而按钮为return "<div class='controlBtn'>"

按钮处理事件的代码如下：

//按钮点击事件    grid.on('cellclick', function (grid, rowIndex, columnIndex, e) {        var btn = e.getTarget('.controlBtn');        var get = e.getTarget('.get');        if (get) {            var t = e.getTarget();            record = grid.getStore().getAt(rowIndex);            var control = t.className;            row = grid.getSelectionModel().getSelected(); //得到选择所有行            rowIndexId = rowIndex;            this.GetRoomDetails(record, rowIndexId, projectName, loudongName); //传行一行记录直接加载        }        if (btn) {            var t = e.getTarget();            record = grid.getStore().getAt(rowIndex);            var control = t.className;            row = grid.getSelectionModel().getSelected(); //得到选择所有行            switch (control) {                 case 'sale_already':                    {                        var state = "已售";                        //       this.SetSaleState(record,state)                        this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)                    }                    break;                case 'order_bit':                    {                        var state = "大定";                        //       this.SetSaleState(record,state)                          this.GetOrderManagement(record, state, rowIndexId, projectName, loudongName)                    }                    break;                   }        }    },this);};