ExtJs 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); } }

 

用法如下:

 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="#" οnclick=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); } } } }