求extjs 可编辑grid
谁还有自己做过可编辑GRID的例子，能添加新行，能初始化数据，例如其中一列是选择框，数据是从数据库获取过来的
麻烦各位了。
[解决办法]
var sm = new Ext.grid.CheckboxSelectionModel(); // ext自带的CheckBox选择列
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),// 行号列
sm,
{
header:"项目编号",
dataIndex:"itemId",
align:"center",
width:80,
sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))
},
{
header:"项目值",
dataIndex:"itemValue",
width:180,
sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))
},
{
header:"排列顺序",
dataIndex:"itemOrder",
align:"center",
width:80,
sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))
},
// {
// header:"是否有效",
// dataIndex:"isLocked",
// align:"center",
// width:80,
// sortable:true,
// renderer:function(value){
// return value ? "是" : "否";
// }
//// ,
//// editor:new Ext.grid.GridEditor(new Ext.form.Checkbox({width:40,align:"center"}))
// },
{
header:"项目说明",
dataIndex:"itemRemark",
width:240,
sortable:true,
editor:new Ext.grid.GridEditor(new Ext.form.TextField())
},{
dataIndex:"id",
hidden:true
},
{
dataIndex:"dictTypeId",
hidden:true
}
]);
var gridpanel;
//gridpanel头部工具栏
var gridTbar = new Ext.Toolbar([{
text : "新增",
tooltip : "增加项目",
icon : "../../pic/add-row.gif",
handler : function() {
if(dictTypeId==0){
Ext.Msg.alert("提示","请先选择类别");
}else{
var initValue={
id:"",
dictTypeId:"",
itemId:"",
itemValue:"",
itemOrder:"",
isLocked:null,
itemRemark:"",
dictTypeId:dictTypeId
};
var item=new Ext.data.Record(initValue);
gridpanel.stopEditing();
ds.add(item);
item.dirty=true;
item.modified=initValue;
if (gridpanel.getStore().modified.indexOf(item)==-1) {
gridpanel.getStore().modified.push(item);
}
}
}
},"-",{
text:"保存",
tooltip:"保存操作",
icon:"../../pic/update.gif",
handler:function(){
var modified=gridpanel.getStore().modified.slice(0);//得到修改过后的数据集合
//将数据放到另一个数组中
var jsonArray={};
Ext.each(modified,function(m){
if (m.data.itemId==""
[解决办法]
m.data.itemId==null
[解决办法]
m.data.itemValue==""
[解决办法]
m.data.itemValue==null
[解决办法]
m.data.itemOrder==""
[解决办法]
m.data.itemOrder==null) {
Ext.Msg.alert("提示","请正确填写!");
}else{
Ext.Ajax.request({
url:ctx()+"/spring/dic/save",
method:"post",
success:function(){
Ext.Msg.alert("提示","保存成功!");
ds.commitChanges();
ds.load();
},
failure:function(){
Ext.Msg.alert("提示","保存失败!");
},
params:{
id:m.data.id,
itemId:m.data.itemId,
itemValue:m.data.itemValue,
itemRemark:m.data.itemRemark,
itemOrder:m.data.itemOrder,
dictTypeId:m.data.dictTypeId,
isLocked:m.data.isLocked
}
});
}
});
}
},"-",{
text:"删除",
tooltip:"删除项目",
icon:"../../pic/delete.gif",
handler:function(){
if (sm.getCount() == 0) {
Ext.MessageBox.alert("提示", "请选择要删除的行！");
} else {
var dictItem = sm.getSelected();
Ext.Msg.confirm('提示', '您确定要删除吗？', function(button, text) {
var ids = "";
var records = gridpanel.getSelectionModel().getSelections();
for (var i = 0; i < records.length; i++) {
if (i == 0) {
ids = records[0].data["id"];
} else {
ids += ',' + records[i].data["id"];
}
}
if (button == 'yes') {
Ext.Ajax.request({
url : ctx() + '/spring/dic/delete',
params : {
ids : ids
},
success : function() {
Ext.Msg.alert('提示', '删除成功!');
ds.remove(dictItem);
ds.reload();
},
failure : function() {
Ext.Msg.alert('提示', '删除失败!');
}
});
}
});
}
}
}]);
var toolBar = new Ext.PagingToolbar({
pageSize : 15,
store : ds,
autoWidth : true,
displayInfo : true,
nextText : '下一页',
firstText : '第一页',
prevText : '上一页',
lastText : '末页',
displayMsg : "本页显示第{0}到{1}条的记录,一共有{2}条记录",
emptyMsg : "没有查询到相关的记录"
});
// var centerpanel=new Ext.Panel({//中心部分
// region:"center",
//bodyBorder : false,
//border:false
// });
gridpanel=new Ext.grid.EditorGridPanel({
title:treetext,
id:"typegrid",
//height:centerpanel.getHeight(),
//width:centerpanel.getWidth(),
region:"center",
cm:cm,
sm:sm,
tbar:gridTbar,
bbar:toolBar,
clicksToEdit: 1,
autoEncode:true,
ds:ds
});
