gridPanel添加按钮

在实际开发中有的时候需要一些下图这样的功能,为了实现下图方法,需要做很多事情!当然有一种很好的方法,



但是不安全,不容易维护!为了方便维护所以写了下面的方法!


///添加列单击事件,方便在列内添加功能按钮  
Ext.grid.GridPanel.prototype.processEvent = function(name, e){  
                        this.fireEvent(name, e);  
                        var t = e.getTarget();  
                        var v = this.view;  
                        var header = v.findHeaderIndex(t);  
                        if(header !== false){  
                            this.fireEvent("header" + name, this, header, e);  
                        }else{  
                            var row = v.findRowIndex(t);  
                            var cell = v.findCellIndex(t);  
                            if(row !== false){  
                                this.fireEvent("row" + name, this, row, e);  
                                if(cell !== false){  
                                    var col =this.colModel.config[cell];  
                                    var record= this.store.getAt(row);       
                                    if(typeof col.onColumnCilck == "function")  
                                    {                             
                                        col.onColumnCilck(this,record,row,cell,e);  
                                    }  
                                    this.fireEvent("cell" + name, this, row, cell, e);  
                                }  
                            }  
                    }}    
//按钮列  
Ext.grid.ButtonColumn =function(text){    
    var a={  
        text:text  
    }  
    return  function(v, p, record){  
        var tpl=    new Ext.Template('<button type="button">{text}</button>');  
        return tpl.apply(a);  
    }  
}                    
///添加列单击事件,方便在列内添加功能按钮
Ext.grid.GridPanel.prototype.processEvent = function(name, e){
            this.fireEvent(name, e);
            var t = e.getTarget();
            var v = this.view;
            var header = v.findHeaderIndex(t);
            if(header !== false){
                this.fireEvent("header" + name, this, header, e);
            }else{
                var row = v.findRowIndex(t);
                var cell = v.findCellIndex(t);
                if(row !== false){
                    this.fireEvent("row" + name, this, row, e);
                    if(cell !== false){
                     var col =this.colModel.config[cell];
                     var record= this.store.getAt(row);    
                     if(typeof col.onColumnCilck == "function")
                     {                  
                      col.onColumnCilck(this,record,row,cell,e);
                     }
                        this.fireEvent("cell" + name, this, row, cell, e);
                    }
                }
           }}
//按钮列
Ext.grid.ButtonColumn =function(text){
var a={
  text:text
}
return function(v, p, record){
     var tpl= new Ext.Template('<button type="button">{text}</button>');
        return tpl.apply(a);
    }
}          

用法如下:


function RiYongPinGrid() {  
    var sm = new Ext.grid.CheckboxSelectionModel();   
 
    var ColumnProperts = [sm,  
        {  
          
        Name : '',  
        Caption : "按钮",  
        Type : 'string',  
        width : 180,  
        renderer : Ext.grid.ButtonColumn('按钮'),  
        onColumnCilck:function(grid,record,rowIndex,colIndex,e)  
        {  
            alert(record.get("strname"))  
            Alert(rowIndex);  
            Alert(colIndex);  
        },  
        editor : new Ext.form.TextField()  
    },{  
          
        Name : 'strname',  
        Caption : "办公用品名称",  
        Type : 'string',  
        width : 180,  
        renderer : function(value, metadata, record) {  
            crecord = record;  
            return "<a href="#" mce_href="#" onclick=javascript:ShowViewWin()>" 
                    + value + "</a>";  
        },  
        onColumnCilck:function(grid,record,rowIndex,colIndex,e)  
        {  
            alert(record.get("strname"))  
            Alert(rowIndex);  
            Alert(colIndex);  
        },  
        editor : new Ext.form.TextField()  
    }, {  
        Name : 'iadderid',  
        Caption : "创建人",  
        Type : 'string',  
        width : 180,  
        renderer : ColumnPropert.getStoreRenderer({  
                    store : TestData.StaffStore,  
                    valueField : 'istaffbasicinfoid',  
                    DisplayField : 'strrealname' 
                }),  
        editor : new Ext.form.TextField()  
    }, {  
        Name : 'iguanlierid',  
        Caption : "管理人",  
        Type : 'string',  
        width : 180,  
        renderer : ColumnPropert.getStoreRenderer({  
                    store : TestData.StaffStore,  
                    valueField : 'istaffbasicinfoid',  
                    DisplayField : 'strrealname' 
                }),  
        editor : new Ext.form.TextField()  
    }, {  
        Name : 'iadddeptid',  
        Caption : "归属部门",  
        Type : 'string',  
        width : 180,  
        renderer : ColumnPropert.getStoreRenderer( {  
                store : TestData.DeptStore,  
                valueField : 'ideptid',  
                DisplayField : 'strdeptname' 
        }),  
        editor : new Ext.form.TextField()  
    }];  
 
    var columnPropert1 = new ColumnPropert(ColumnProperts);  
    var record = new Ext.data.Record.create(columnPropert1.GetRecord());  
 
    var cm = new Ext.grid.ColumnModel(columnPropert1.GetColumnModel());  
    cm.defaultSortable = true;  
    var store = new Ext.data.JsonStore({  
                url : ServerUrl + '?op=list' 
            });  
    store.load();  
    var grid = new Ext.grid.GridPanel({  
        store : store,  
        cm : cm,  
        sm : sm,  
        id : 'RYPGrid',  
        frame : true,  
        clicksToEdit : 1,  
        tbar : [{  
                    text : '添加日用品',  
                    iconCls:'tianjia',  
                    handler : function(src) {  
                        StateEdit(src.text)  
                    }  
                }, {  
                    text : '修改日用品',  
                        iconCls : 'application_form_edit',  
                    handler : function(src) {  
                        var r = Ext.getCmp('RYPGrid').getSelectionModel()  
                                .getSelected();  
                        if (r) {  
                            StateEdit(src.text)  
                            Ext.getCmp('RYPEditPanel').getForm().loadRecord(r);  
                        } else {  
                            alert('请选择一条记录');  
                        }  
                    }  
                }, {  
                    text : '删除日用品',  
                    iconCls:'shanchu',  
                    handler : function(src) {  
                        var r = Ext.getCmp('RYPGrid').getSelectionModel()  
                                .getSelected();  
                        if (r) {  
                            confirm('提示', '确认删除吗?', function() {  
                                        AjaxMethod(ServerUrl, {  
                                                    op : 'delete',  
                                                    id : r.get('ibangongyongpinid')  
                                                }, function(response, options) {  
                                                    alert(response.responseText);  
                                                    Ext.getCmp('RYPGrid').store.remove(r);  
                                                });  
                                    });  
                        } else {  
                            alert('请选择一条记录');  
                        }  
                    }  
                }, '日用品查询', {  
                    xtype : 'combo',  
                    triggerClass : ',x-form-search-trigger',  
                    onTriggerClick : function(src) {  
                        store.removeAll();  
                        store.load({  
                                    params : {  
                                        Key : this.getValue(),  
                                        start : 0,  
                                        limit : 25  
                                    }  
                                });  
                    }  
                }]  
    });  
 
    return grid;  
} 
function RiYongPinGrid() {
var sm = new Ext.grid.CheckboxSelectionModel();

var ColumnProperts = [sm,
  {
 
  Name : '',
  Caption : "按钮",
  Type : 'string',
  width : 180,
  renderer : Ext.grid.ButtonColumn('按钮'),
  onColumnCilck:function(grid,record,rowIndex,colIndex,e)
  {
   alert(record.get("strname"))
   Alert(rowIndex);
   Alert(colIndex);
  },
  editor : new Ext.form.TextField()
},{
 
  Name : 'strname',
  Caption : "办公用品名称",
  Type : 'string',
  width : 180,
  renderer : function(value, metadata, record) {
   crecord = record;
   return "<a href="#" mce_href="#" onclick=javascript:ShowViewWin()>"
     + value + "</a>";
  },
  onColumnCilck:function(grid,record,rowIndex,colIndex,e)
  {
   alert(record.get("strname"))
   Alert(rowIndex);
   Alert(colIndex);
  },
  editor : new Ext.form.TextField()
}, {
  Name : 'iadderid',
  Caption : "创建人",
  Type : 'string',
  width : 180,
  renderer : ColumnPropert.getStoreRenderer({
     store : TestData.StaffStore,
     valueField : 'istaffbasicinfoid',
     DisplayField : 'strrealname'
    }),
  editor : new Ext.form.TextField()
}, {
  Name : 'iguanlierid',
  Caption : "管理人",
  Type : 'string',
  width : 180,
  renderer : ColumnPropert.getStoreRenderer({
     store : TestData.StaffStore,
     valueField : 'istaffbasicinfoid',
     DisplayField : 'strrealname'
    }),
  editor : new Ext.form.TextField()
}, {
  Name : 'iadddeptid',
  Caption : "归属部门",
  Type : 'string',
  width : 180,
  renderer : ColumnPropert.getStoreRenderer( {
    store : TestData.DeptStore,
    valueField : 'ideptid',
    DisplayField : 'strdeptname'
  }),
  editor : new Ext.form.TextField()
}];

var columnPropert1 = new ColumnPropert(ColumnProperts);
var record = new Ext.data.Record.create(columnPropert1.GetRecord());

var cm = new Ext.grid.ColumnModel(columnPropert1.GetColumnModel());
cm.defaultSortable = true;
var store = new Ext.data.JsonStore({
    url : ServerUrl + '?op=list'
   });
store.load();
var grid = new Ext.grid.GridPanel({
  store : store,
  cm : cm,
  sm : sm,
  id : 'RYPGrid',
  frame : true,
  clicksToEdit : 1,
  tbar : [{
     text : '添加日用品',
     iconCls:'tianjia',
     handler : function(src) {
      StateEdit(src.text)
     }
    }, {
     text : '修改日用品',
      iconCls : 'application_form_edit',
     handler : function(src) {
      var r = Ext.getCmp('RYPGrid').getSelectionModel()
        .getSelected();
      if (r) {
       StateEdit(src.text)
       Ext.getCmp('RYPEditPanel').getForm().loadRecord(r);
      } else {
       alert('请选择一条记录');
      }
     }
    }, {
     text : '删除日用品',
     iconCls:'shanchu',
     handler : function(src) {
      var r = Ext.getCmp('RYPGrid').getSelectionModel()
        .getSelected();
      if (r) {
       confirm('提示', '确认删除吗?', function() {
          AjaxMethod(ServerUrl, {
             op : 'delete',
             id : r.get('ibangongyongpinid')
            }, function(response, options) {
             alert(response.responseText);
             Ext.getCmp('RYPGrid').store.remove(r);
            });
         });
      } else {
       alert('请选择一条记录');
      }
     }
    }, '日用品查询', {
     xtype : 'combo',
     triggerClass : ',x-form-search-trigger',
     onTriggerClick : function(src) {
      store.removeAll();
      store.load({
         params : {
          Key : this.getValue(),
          start : 0,
          limit : 25
         }
        });
     }
    }]
});

return grid;
}

要问我ColumnPropert是什么?是我自己写的一个方便开发的东西!因为store和grid之间的列写发,不同所以搞了一个这个东西!

代码如下:


// / <reference path="../../extjs2.0/adapter/ext/ext-base.js" />  
 
// / <reference path="../../extjs2.0/ext-all-debug.js" />  
// / <reference path="namespace.js" />  
 
/* 
* Config= [ {Caption:'', Name:'', Type:'' } ], 
*/ 
 
ColumnPropert = function(config) {  
    this.Columns = config;  
    // Columns:[{Caption:'',Name:'',Type:'',ColumnModelConfig:[],StoreConfig:[]}],  
    // this.Columns.Caption=  
 
    // 获取数据源的字段描述  
    // VorP是显示,还是打印  
    this.GetJsonStoreFields = function(VorP) {  
 
        var fields = [], ln = this.Columns.length, j = 0;  
        for (var i = 0;i < ln; i++) {  
            var column = this.Columns[i];  
            var field = {};  
            // for(var o in column)  
            // {  
            // field[o]=column[o];  
            // }  
            // 显示  
            if (VorP == 'V' && column.IsView == 1 || VorP == null) {  
                if (column.Name != null) {  
                    field.name = column.Name;  
                    field.type = column.Type;  
                    fields[j] = field;  
                    j++;  
                }  
            }  
            // 打印  
            if (VorP == 'P' && column.IsPrint == 1) {  
                if (column.Name != null) {  
                    field.name = column.Name;  
                    field.type = column.Type;  
                    fields[j] = field;  
                    j++;  
                }  
            }  
        }  
        return fields;  
    };  
 
    // 获取数据源的字段描述  
    this.GetColumnModel = function(VorP) {  
        var ColumnModels = [], ln = this.Columns.length, j = 0;  
 
        for (var i = 0;i < ln; i++) {  
            var column = this.Columns[j];  
            var ColumnModel = {};  
 
            if (column.Type == 'date') {  
                ColumnModel.renderer = Ext.util.Format.dateRenderer("Y-m-d");// 默认的日期渲染方式  
            }  
 
            if (VorP == 'V' && column.IsView == 1 || VorP == null) {  
                for (var o in column) {  
                    ColumnModel[o] = column[o];  
                }  
                ColumnModel.header = column.Caption;  
                ColumnModel.dataIndex = column.Name;  
                ColumnModel.type = column.Type;  
                ColumnModels[j] = ColumnModel;  
                j++;  
            } else if (VorP == 'P' && column.IsPrint == 1) {  
                for (var o in column) {  
                    ColumnModel[o] = column[o];  
                }  
                ColumnModel.header = column.Caption;  
                ColumnModel.dataIndex = column.Name;  
                ColumnModel.type = column.Type;  
                ColumnModels[j] = ColumnModel;  
                j++;  
            }  
 
        }  
        return ColumnModels;  
    };  
    // 单条记录  
    this.GetRecord = function(VorP) {  
 
        var fields = [], ln = this.Columns.length, j = 0;  
        for (var i = 0;i < ln; i++) {  
            var column = this.Columns[i];  
            var field = {};  
            if (VorP == 'V' && column.IsView == 1 || VorP == null) {  
                if (column.Name != null) {  
                    field.name = column.Name;  
                    // field.type=column.Type;  
                    fields[j] = field;  
                    j++;  
                }  
            } else if (VorP == 'P' && column.IsPrint == 1) {  
                if (column.Name != null) {  
                    field.name = column.Name;  
                    // field.type=column.Type;  
                    fields[j] = field;  
                    j++;  
                }  
            }  
        }  
        return fields;  
    }  
 
    // 返回一条新的空记录  
    this.GetNewRecord = function(VorP) {  
        var newObj = {}, ln = this.Columns.length;  
        for (var i = 0;i < ln; i++) {  
            var column = this.Columns[i];  
 
            if (VorP == 'V' && column.IsView == 1 || VorP == null) {  
                if (column.Name != null) {  
                    newObj[column.Name] = column.DefaultValue==null? '':column.DefaultValue;  
                }  
            } else if (VorP == 'P' && column.IsPrint == 1) {  
                if (column.Name != null) {  
                    newObj[column.Name] = column.DefaultValue==null? '':column.DefaultValue;  
                }  
            }  
        }  
        return newObj;  
    }  
      
    
};  
    /*根据store来渲染grid的列,不需要自己再写额外的渲染方法 
     * Examples 
     *  
        storeConfig:{ 
            store:infoStore, 
            valueField:'Id', 
            DisplayField:'Name' 
        } 
    */ 
ColumnPropert.getStoreRenderer = function(storeConfig) {  
        return function(value) {  
            var ln = storeConfig.store.getCount();  
            var record;  
            for (var i = 0;i < ln; i++) {  
                record = storeConfig.store.getAt(i);  
                if (record.get(storeConfig.valueField) == value) {  
                    return record.get(storeConfig.DisplayField);  
                }  
            }  
        }  
    }