Grid “操作”列的plugin

尽管EXT的常用设计是把对GRID记录的操作放在tbar或者bbar上，当总有人的需求与这个不一样。希望在每一条记录的后面，添加一列“操作”，对记录进行管理（修改、删除等）
于是，在参考了checkbox 的plugin以后，就可以完成上面的任务了。
插件的代码：

Ext.ux.OperateColumn = function(config){
        /**
         * @cfg 操作
         */
        this.operates = [];
        /**
         * @cfg 行样式的class名称
         */
        this.colStyle = 'grid3-operate-col';

        /**
         * @private 操作与处理函数映射
         */
        this.operateHandler = {}; 

	    Ext.apply(this, config);
	    if(!this.id){
	        this.id = Ext.id();
	    }
	    this.renderer = this.renderer.createDelegate(this);
	};

	Ext.ux.OperateColumn.prototype ={
        strTplImg : '<img class="{0}" op="{1}" ext:qtip="{2}" src="{3}"></img>',
        strTplText:'<span class ="{0}" op="{1}" style="{2}">{3}</span>',
	    init : function(grid){
	        this.grid = grid;
	        this.grid.on('render', function(){
	            var view = this.grid.getView();
	            view.mainBody.on('click', this.onClick, this);
	        }, this);
	    },
	    onClick : function(e, t){
            var op = t.getAttribute('op');
            if(this.operateHandler[op]){
                var index = this.grid.getView().findRowIndex(t);
                var record = this.grid.store.getAt(index);
                this.operateHandler[op](record);
            }
	    },

	    renderer : function(v, p, record){
            var ret = '';
            for(var i=0,len = this.operates.length;i < len; i++){
                this.operateHandler[this.operates[i]['type']] = this.operates[i]['handler'];

                if(this.operates[i].icon){
                    ret = ret + String.format(this.strTplImg,this.colStyle,this.operates[i]['type'],
                    this.operates[i]['qTips']||'',this.operates[i]['icon']);
                }
                else{
                    ret = ret + String.format(this.strTplText,this.colStyle,this.operates[i]['type'],
                    this.operates[i]['textStyle'],this.operates[i]['text']);
                }
            }
            return ret;
        }
	};

grid3-operate-col 的CSS代码：

.grid3-operate-col{
	margin:0 5px;
	cursor :pointer;
}

这里支持两种显示方式：
1.放上图片来表示操作——需要写上图片的位置和提示（可选）
2.写上文字来表示操作——需要写上文字和定义样式（可选）

来看一个使用例子：
首先是创建这样的一个实例：

     var opColumn = new Ext.ux.OperateColumn({
       header: "操作",
       dataIndex: 'id',//定义要映射的字段
       width: 80,
       align:'center',
       operates:[
       {
            type:'A',
            handler:function(){alert('a');},
            /*qTips:'修改',
            icon:'edit.gif'*/
            text: '修改',
            textStyle:'color:blue'
       },{
            type:'D',
            handler:function(record){grid.store.remove(record);},
            text:'删除',
            textStyle:'color:red'
/*            qTips:'删除',
            icon:'delete.gif'*/
       }
       ]
     });

在Grid中的应用：

.....
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ,opColumn//作为一列
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:350,
        width:600,
        title:'Array Grid'
        ,plugins:opColumn//添加插件

    });
.......

最后，上2张PP:

[img]http://dl.iteye.com/upload/attachment/265970/f3b60f98-b8a1-37e8-bc1e-099c49e4b33a.bmp[/img]

[img]http://dl.iteye.com/upload/attachment/265972/db4504e5-444b-32da-87ee-19d47f1a7519.jpg[/img]