作者: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 //自动将指定列扩展至最宽。
});
如果您觉得本文的内容对您的学习有所帮助,您可以微信: