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);
};

轉：http://blog.csdn.net/suixufeng/article/details/7468283