ExtJs gridpanel 中的按鈕列

  在實際開發中有的時候需要一些這樣的功能,為了實現方法,需要做很多事情!當然有一種很好的方法,

 

 

但是不安全,不容易維護!為了方便維護所以寫了下面的方法!

 

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

 

用法如下:

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

 

要問我ColumnPropert是什麼?是我自己寫的一個方便開發的東西!因為store和grid之間的列寫發,不同所以搞了一個這個東西!

代碼如下:

// / <reference path="../../extjs2.0/adapter/ext/ext-base.js" /></p><p>// / <reference path="../../extjs2.0/ext-all-debug.js" /><br />// / <reference path="namespace.js" /></p><p>/*<br /> * Config= [ {Caption:'', Name:'', Type:'' } ],<br /> */</p><p>ColumnPropert = function(config) {<br />this.Columns = config;<br />// Columns:[{Caption:'',Name:'',Type:'',ColumnModelConfig:[],StoreConfig:[]}],<br />// this.Columns.Caption=</p><p>// 擷取資料來源的欄位描述<br />// VorP是顯示,還是列印<br />this.GetJsonStoreFields = function(VorP) {</p><p>var fields = [], ln = this.Columns.length, j = 0;<br />for (var i = 0;i < ln; i++) {<br />var column = this.Columns[i];<br />var field = {};<br />// for(var o in column)<br />// {<br />// field[o]=column[o];<br />// }<br />// 顯示<br />if (VorP == 'V' && column.IsView == 1 || VorP == null) {<br />if (column.Name != null) {<br />field.name = column.Name;<br />field.type = column.Type;<br />fields[j] = field;<br />j++;<br />}<br />}<br />// 列印<br />if (VorP == 'P' && column.IsPrint == 1) {<br />if (column.Name != null) {<br />field.name = column.Name;<br />field.type = column.Type;<br />fields[j] = field;<br />j++;<br />}<br />}<br />}<br />return fields;<br />};</p><p>// 擷取資料來源的欄位描述<br />this.GetColumnModel = function(VorP) {<br />var ColumnModels = [], ln = this.Columns.length, j = 0;</p><p>for (var i = 0;i < ln; i++) {<br />var column = this.Columns[j];<br />var ColumnModel = {};</p><p>if (column.Type == 'date') {<br />ColumnModel.renderer = Ext.util.Format.dateRenderer("Y-m-d");// 預設的日期渲染方式<br />}</p><p>if (VorP == 'V' && column.IsView == 1 || VorP == null) {<br />for (var o in column) {<br />ColumnModel[o] = column[o];<br />}<br />ColumnModel.header = column.Caption;<br />ColumnModel.dataIndex = column.Name;<br />ColumnModel.type = column.Type;<br />ColumnModels[j] = ColumnModel;<br />j++;<br />} else if (VorP == 'P' && column.IsPrint == 1) {<br />for (var o in column) {<br />ColumnModel[o] = column[o];<br />}<br />ColumnModel.header = column.Caption;<br />ColumnModel.dataIndex = column.Name;<br />ColumnModel.type = column.Type;<br />ColumnModels[j] = ColumnModel;<br />j++;<br />}</p><p>}<br />return ColumnModels;<br />};<br />// 單條記錄<br />this.GetRecord = function(VorP) {</p><p>var fields = [], ln = this.Columns.length, j = 0;<br />for (var i = 0;i < ln; i++) {<br />var column = this.Columns[i];<br />var field = {};<br />if (VorP == 'V' && column.IsView == 1 || VorP == null) {<br />if (column.Name != null) {<br />field.name = column.Name;<br />// field.type=column.Type;<br />fields[j] = field;<br />j++;<br />}<br />} else if (VorP == 'P' && column.IsPrint == 1) {<br />if (column.Name != null) {<br />field.name = column.Name;<br />// field.type=column.Type;<br />fields[j] = field;<br />j++;<br />}<br />}<br />}<br />return fields;<br />}</p><p>// 返回一條新的空記錄<br />this.GetNewRecord = function(VorP) {<br />var newObj = {}, ln = this.Columns.length;<br />for (var i = 0;i < ln; i++) {<br />var column = this.Columns[i];</p><p>if (VorP == 'V' && column.IsView == 1 || VorP == null) {<br />if (column.Name != null) {<br />newObj[column.Name] = column.DefaultValue==null? '':column.DefaultValue;<br />}<br />} else if (VorP == 'P' && column.IsPrint == 1) {<br />if (column.Name != null) {<br />newObj[column.Name] = column.DefaultValue==null? '':column.DefaultValue;<br />}<br />}<br />}<br />return newObj;<br />}</p><p>};<br /> /*根據store來渲染grid的列,不需要自己再寫額外的渲染方法<br /> * Examples<br /> *<br /> storeConfig:{<br /> store:infoStore,<br /> valueField:'Id',<br /> DisplayField:'Name'<br /> }<br /> */<br />ColumnPropert.getStoreRenderer = function(storeConfig) {<br />return function(value) {<br />var ln = storeConfig.store.getCount();<br />var record;<br />for (var i = 0;i < ln; i++) {<br />record = storeConfig.store.getAt(i);<br />if (record.get(storeConfig.valueField) == value) {<br />return record.get(storeConfig.DisplayField);<br />}<br />}<br />}<br />}