Javascript 之 Ext.grid.ColumnModel 综合施用，加按钮，单选框

先来张图片，做出来的样子如下：

源码

function appgroup_message_list(mainpanel){

    var checkbox = new Ext.grid.CheckboxSelectionModel();//单选框
    var cm = new Ext.grid.ColumnModel([
	    checkbox,
        {header: _("Name"), width: 80, sortable: true, dataIndex: 'appgroup'},
        {header: _("Description"), width: 80, sortable: true, dataIndex: 'description'},
		{header: _("Status"), width: 80, sortable: true, dataIndex: 'status'},
		{header:_("Manage"),dataIndex:"manage_button",width:80,renderer: function(){return " <button type='button' onclick=''>Manage</button>"}},//这里用的是renderer,放入了一个button
		{header:_("Delete"),dataIndex:"delete_button",width:80,renderer: function(){return " <button type='button' onclick=''>Delete</button>"}},
    ]);
	
	var app_group_store = new Ext.data.JsonStore({//发url请求去后台得到列表数据
        url: '/apply/get_application_group_list',
        root: 'rows',
        fields: ['appgroup'],
        successProperty:'success',
        listeners:{
            loadexception:function(obj,opts,res,e){
                var store_response=Ext.util.JSON.decode(res.responseText);
                Ext.MessageBox.alert(_("Error"),store_response.msg);
            }
        }
    });
	app_group_store.load();
    var grid = new Ext.grid.GridPanel({
		cm:cm,
		selModel:checkbox,
        store: app_group_store,
        stripeRows: true,
        frame:false,
        autoExpandColumn:1,
        autoHeight:true,
        autoExpandMax:300,
        autoExpandMin:150,
        maxHeight:100,
        enableHdMenu:true
    });
	grid.addListener('cellclick',cellclick); //添加触发的函数   
	function cellclick(grid, rowIndex, columnIndex, e) {   
        var record = grid.getStore().getAt(rowIndex);//这里得到的是一个对象，即你点击的某一行的一整行数据
		//alert(record.data.appgroup);//取出其中元素appgroup的值
		var fieldName = grid.getColumnModel().getDataIndex(columnIndex);  
		if (fieldName == 'manage_button'){//通过加判断条件限制当点击某个列表内容的时候触发，不然只要你点列表的随便一个地方就触发了。
		    //show_user_manager(record);	    
		}
		else if (fieldName == 'delete_button'){
		    delete_app_group(record.data.appgroup,mainpanel);
			
		}
    } 
    return grid;
}

很简单吧