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