ExtJS之EditorGridPanel

作者：zccst

之前大多用Ext.grid.GridPanel，现在需要可编辑功能，发现比以前稍复杂一些。
就是需要对指定列进行可编辑设置，并获取编辑后的值，存入数据库。
1，对指定列进行可编辑设置
比如下拉菜单、日历等。

2，获取编辑后的值
可使用afteredit事件，并用panel的on()方法监听。
当然也有beforeedit事件。

不过，也可以直接在可编辑的下拉菜单中使用listener监听并存入数据库。

			listeners : {
				'select' : function(obj, data, index){
					selectedValue = data.data.name;
...
				}
			}

3，存入数据库
使用Ext.Ajax.request({url:URL,params:"key:value",success:function(){},failure:function(){}});

例子

	var store = new Ext.data.JsonStore({
		url: 'api/divide_suit.php?action=suitList',
		listeners:{
			'loadexception' : function(e){
				alert(e.toString());
			}
		},
		fields:[
			{name:'id'},
			{name:'suit'},
			{name:'type'}
		]
	});
	store.load();
	
	var colM=new Ext.grid.ColumnModel([
		{header:"编号",dataIndex:'id',width:80,sortable:true},
		{header:"套餐名称",dataIndex:"suit",width:240,sortable:true},
		{header:"套餐类型",dataIndex:"type",sortable:true,width:160,
			editor:new Ext.form.ComboBox({
				transform:"suitTypeList",
				triggerAction:'all',
				lazyRender:true
			})
		}
	]);

	var panel = new Ext.grid.EditorGridPanel({
		baseCls: 'x-plain',
		id:grid_id,
		title:'将套餐分组',
		closable:true,
		cm:colM,
		store:store,
		//autoExpandColumn:2  //自动将指定列扩展至最宽。
	});
	
	panel.on("afteredit", afterEdit, panel); //EditorGridPanel的afteredit事件监听 
	function afterEdit(obj){ 
        var r = obj.record;//获取被修改的行 
        var l = obj.field; //获取被修改的列 
        var suit_id   = r.get("id");
		var suit_name = r.get("suit");
        var suit_type = r.get(l);
		//alert('suit_id='+suit_id+' suit_name='+suit_name+'  suit_type='+suit_type);return;
        Ext.Ajax.request({ 
			url: 'api/divide_suit.php?action=edit_suit_type',
			params: "suit_id="+suit_id + "&suit_name="+suit_name + '&suit_type='+suit_type,
			success: function(resp,opts) {
				var respText = Ext.util.JSON.decode(resp.responseText);
				if(respText.status != 0){ alert(respText.msg); };
			},
			failure: function(resp,opts) { Ext.Msg.alert('保存失败', "请重试！"); }
		}); 
    }

批注：其他几个参数
1，grid_id
2，渲染panel到什么地方。

下拉菜单还需要在html中写：

<select name="suitTypeList" id="suitTypeList">
  <option value='主流套餐'>主流套餐</option>
  <option value='均衡套餐'>均衡套餐</option>
  <option value='存储套餐'>存储套餐</option>
  <option value='其他套餐'>其他套餐</option>
</select>

附：获取值afteredit的几种写法
1，
grid.on('afteredit',function(e){ //获得Ext.grid.EditorGridPanel编辑信息
      e.row;//修改過的行從0開始
      e.column;//修改列
      e.originalValue;//原始值
      e.value;//新值
    });
来源：http://blog.csdn.net/yanji94521/archive/2008/06/16/2

2，
grid.on("afteredit", afterEdit, grid); //EditorGridPanel的afteredit事件监听
function afterEdit(obj){
        var r = obj.record;//获取被修改的行
        var l = obj.field; //获取被修改的列
        var id = r.get("id");
        var lie = r.get(l);
        Ext.Ajax.request({
            url: '_action.php?action=edit',
            params: "id=" + id + "&name=" + l + '&value=' + lie
        );
    }
来源：http://hi.baidu.com/_ollie/blog/item/c9f8fac305f7fe53b219a8f8.html

3，
grid.on("afteredit",afterEidt,grid);
function(obj)
{
   obj.row;;//修改过的行从0开始
   obj.column;//修改列
   obj.originalValue;//原始值
   obj.value;//修改后的值
   obj.grid;//当前修改的grid
   obj.field;//正在被编辑的字段名
   obj.record;//正在被编辑的行

}




但是，transform属性是将现有的<select>元素转化为ComboBox，transform的值是<select>元素的id，dom节点或元素。在设置了transform的情况下，如果将包含这个ComboBox的panel销毁，再重新生成一个该panel的对象时，会出现错误：s is null。出错的位置在ext-all-debug.js中，就是找不到当前的select元素。目前，这个问题不知如何解决。

一种替代的方法是直接用store对ComboBox进行初始化。

var colM=new Ext.grid.ColumnModel([
		{header:"编号",dataIndex:'id',width:80,sortable:true},
		{header:"套餐名称",dataIndex:"suit",width:240,sortable:true},
		{header:"套餐类型",dataIndex:"type",width:160,
			editor:new Ext.form.ComboBox({
				id : 'x-combo-list-small',
				store: ['主流套餐','均衡套餐','存储套餐','其他套餐'],
				allowBlank:false,
				triggerAction: 'all',
				emptyText:'套餐类型...'
			})
		}
	]);

	var panel = new Ext.grid.EditorGridPanel({
		baseCls: 'x-plain',
		id:grid_id,
		title:'将套餐分组',
		closable:true,
		cm:colM,
		store:store,
		frame:true,
		clicksToEdit:1,//默认是点击2次
		loadMask: {
            msg: '数据获取中,请稍候...'
        },
		region:'center'
		//autoExpandColumn:2  //自动将指定列扩展至最宽。
	});

如果您觉得本文的内容对您的学习有所帮助，您可以微信：