您的位置:首页 > Web前端 > JavaScript

extjs中的表格编辑

2016-01-16 17:30 766 查看
要实现ext表格编辑首先需要启用CellEditing插件,示例代码如下:

grid = Ext.create('Ext.grid.Panel', {
renderTo : 'information_date',// 渲染到一个div上
frame : true,// 面板渲染
forceFit : true,// 自动填充panel空白处
autoHeight:true,
plugins:[
Ext.create('Ext.grid.plugin.CellEditing',{
//	                     clicksToEdit:1 //设置单击单元格编辑
})
]
}


调用了CellEditing插件之后需要为需要编辑的列指定编辑器

columns: [
{ xtype: "rownumberer", text: "序号", width:40 },
{ text: '姓名', dataIndex: 'name' },
{
text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
editor: {
xtype: "numberfield",
decimalPrecision: 0,
selectOnFocus: true
}
},
{ text: '电话', dataIndex: 'phone', editor: "textfield" }


编辑之后的数据需要保存,调用grid.on('edit', function (editor, e) {});即可

grid.on('edit', function (editor, e) {
Ext.Msg.confirm('系统提示','确定修改?',function(btn){
if(btn=='yes'){
Ext.Ajax.request({
url: path+'/SuppliesMaintainController/xxxx.do',
method: 'post',
params:{},
success: function(response,opts){
//                        var respText = Ext.decode(response.responseText);
//                        Ext.Msg.alert('提示',respText.success);
}
});
}
});
//        e.record.commit();
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: