gridPanel添加按钮

tayuexiaotian

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



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


///添加列单击事件,方便在列内添加功能按钮   
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);   
                }   
            }   
        }   
    }