轉自:https://zccst.iteye.com/blog/1328869

1.

1 之前大多用Ext.grid.GridPanel，現在需要可編輯功能，發現比以前稍復雜一些。 2 就是需要對指定列進行可編輯設置，并獲取編輯后的值，存入數據庫。 3 1，對指定列進行可編輯設置 4 比如下拉菜單、日歷等。 5 6 2，獲取編輯后的值 7 可使用afteredit事件，并用panel的on()方法監聽。 8 當然也有beforeedit事件。 9 10 不過，也可以直接在可編輯的下拉菜單中使用listener監聽并存入數據庫。 11 Js代碼 收藏代碼 12 13 listeners : { 14 'select' : function(obj, data, index){ 15 selectedValue = data.data.name; 16 17 } 18 } 19 20 21 3，存入數據庫 22 使用Ext.Ajax.request({url:URL,params:"key:value",success:function(){},failure:function(){}}); 23 24 例子 25 Js代碼 收藏代碼 26 27 var store = new Ext.data.JsonStore({ 28 url: 'api/divide_suit.php?action=suitList', 29 listeners:{ 30 'loadexception' : function(e){ 31 alert(e.toString()); 32 } 33 }, 34 fields:[ 35 {name:'id'}, 36 {name:'suit'}, 37 {name:'type'} 38 ] 39 }); 40 store.load(); 41 42 var colM=new Ext.grid.ColumnModel([ 43 {header:"編號",dataIndex:'id',width:80,sortable:true}, 44 {header:"套餐名稱",dataIndex:"suit",width:240,sortable:true}, 45 {header:"套餐類型",dataIndex:"type",sortable:true,width:160, 46 editor:new Ext.form.ComboBox({ 47 transform:"suitTypeList", 48 triggerAction:'all', 49 lazyRender:true 50 }) 51 } 52 ]); 53 54 var panel = new Ext.grid.EditorGridPanel({ 55 baseCls: 'x-plain', 56 id:grid_id, 57 title:'將套餐分組', 58 closable:true, 59 cm:colM, 60 store:store, 61 //autoExpandColumn:2 //自動將指定列擴展至最寬。 62 }); 63 64 panel.on("afteredit", afterEdit, panel); //EditorGridPanel的afteredit事件監聽 65 function afterEdit(obj){ 66 var r = obj.record;//獲取被修改的行 67 var l = obj.field; //獲取被修改的列 68 var suit_id = r.get("id"); 69 var suit_name = r.get("suit"); 70 var suit_type = r.get(l); 71 //alert('suit_id='+suit_id+' suit_name='+suit_name+' suit_type='+suit_type);return; 72 Ext.Ajax.request({ 73 url: 'api/divide_suit.php?action=edit_suit_type', 74 params: "suit_id="+suit_id + "&suit_name="+suit_name + '&suit_type='+suit_type, 75 success: function(resp,opts) { 76 var respText = Ext.util.JSON.decode(resp.responseText); 77 if(respText.status != 0){ alert(respText.msg); }; 78 }, 79 failure: function(resp,opts) { Ext.Msg.alert('保存失敗', "請重試！"); } 80 }); 81 } 82 83 84 批注：其他幾個參數 85 1，grid_id 86 2，渲染panel到什么地方。 87 88 下拉菜單還需要在html中寫： 89 Html代碼 收藏代碼 90 91 <select name="suitTypeList" id="suitTypeList"> 92 <option value='主流套餐'>主流套餐</option> 93 <option value='均衡套餐'>均衡套餐</option> 94 <option value='存儲套餐'>存儲套餐</option> 95 <option value='其他套餐'>其他套餐</option> 96 </select> 97 98 99 100 101 附：獲取值afteredit的幾種寫法 102 1， 103 grid.on('afteredit',function(e){ //獲得Ext.grid.EditorGridPanel編輯信息 104 e.row;//修改過的行從0開始 105 e.column;//修改列 106 e.originalValue;//原始值 107 e.value;//新值 108 }); 109 來源：http://blog.csdn.net/yanji94521/archive/2008/06/16/2 110 111 2， 112 grid.on("afteredit", afterEdit, grid); //EditorGridPanel的afteredit事件監聽 113 function afterEdit(obj){ 114 var r = obj.record;//獲取被修改的行 115 var l = obj.field; //獲取被修改的列 116 var id = r.get("id"); 117 var lie = r.get(l); 118 Ext.Ajax.request({ 119 url: '_action.php?action=edit', 120 params: "id=" + id + "&name=" + l + '&value=' + lie 121 ); 122 } 123 來源：http://hi.baidu.com/_ollie/blog/item/c9f8fac305f7fe53b219a8f8.html 124 125 3， 126 grid.on("afteredit",afterEidt,grid); 127 function(obj) 128 { 129 obj.row;;//修改過的行從0開始 130 obj.column;//修改列 131 obj.originalValue;//原始值 132 obj.value;//修改后的值 133 obj.grid;//當前修改的grid 134 obj.field;//正在被編輯的字段名 135 obj.record;//正在被編輯的行 136 137 } 138 139 140 141 142 但是，transform屬性是將現有的<select>元素轉化為ComboBox，transform的值是<select>元素的id，dom節點或元素。在設置了transform的情況下，如果將包含這個ComboBox的panel銷毀，再重新生成一個該panel的對象時，會出現錯誤：s is null。出錯的位置在ext-all-debug.js中，就是找不到當前的select元素。目前，這個問題不知如何解決。 143 144 一種替代的方法是直接用store對ComboBox進行初始化。 145 Js代碼 收藏代碼 146 147 var colM=new Ext.grid.ColumnModel([ 148 {header:"編號",dataIndex:'id',width:80,sortable:true}, 149 {header:"套餐名稱",dataIndex:"suit",width:240,sortable:true}, 150 {header:"套餐類型",dataIndex:"type",width:160, 151 editor:new Ext.form.ComboBox({ 152 id : 'x-combo-list-small', 153 store: ['主流套餐','均衡套餐','存儲套餐','其他套餐'], 154 allowBlank:false, 155 triggerAction: 'all', 156 emptyText:'套餐類型...' 157 }) 158 } 159 ]); 160 161 var panel = new Ext.grid.EditorGridPanel({ 162 baseCls: 'x-plain', 163 id:grid_id, 164 title:'將套餐分組', 165 closable:true, 166 cm:colM, 167 store:store, 168 frame:true, 169 clicksToEdit:1,//默認是點擊2次 170 loadMask: { 171 msg: '數據獲取中,請稍候...' 172 }, 173 region:'center' 174 //autoExpandColumn:2 //自動將指定列擴展至最寬。 175 });

?

總結

以上是生活随笔為你收集整理的97. ExtJS之EditorGridPanel afteredit属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。