ext4 grid edit 添加删除行
extjs--grid动态添加一行和删除一行：
（1）选择rowEditing时，添加一行后的编辑方式为----startEdit(record,columnHeader)
（2）选择cellEditing时，添加一行后的编辑方式为----startEditByPosition(object position)
Ext.onReady( function() {
var store=Ext.create('Ext.data.Store', {
fields:['id','name','email','phone'],
data:[{
'id':"1",
'name':'one',
'email':'[email protected]',
'phone':'123321123'
},{
'id':"2",
'name':'two',
'email':'[email protected]',
'phone':'456654321'
},{
'id':"3",
'name':'there',
'email':'[email protected]',
'phone':'789987321'
}]
});
(1)rowEditing：
var rowEditing=Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit:2,
cancelEdit: function(grid) {//添加一行数据时，如果没有点击update而是点击cancel，则此行数据不会加入到store中
var me = this;
if (me.editing) {
me.getEditor().cancelEdit();
var record=me.context.record;//包含属性如下：grid,record,field,value,row,column,rowIdx,colIdx,view,store
var id=record.data.id;
if(id==''){//id是由后台自动生成的，如果id不存在，则说明是通过页面的添加按钮直接添加的，还没有存入到后台数据库中，可以直接在页面删除
var grid=me.context.grid;
var items=grid.getSelectionModel().getSelection();
Ext.each(items,function(item){
store.remove(item);
})
}
}
},
listeners: {
edit: function(e) {
if(e.record.data.id){//id由后台自动生成，编辑时
//有id,则说明是更新数据库。
}else{
//无id，则说明是向数据库中插入一条记录
}
e.record.data.name;
e.record.data.email;
e.record.data.phone;
}
}
});
var grid=Ext.create('Ext.grid.Panel', {
title:'grid添加数据与删除数据',
width:400,
height:300,
store:store,
multiSelect: true,
bodyPadding:10,
renderTo:Ext.getBody(),
columns:[{
header:'姓名',
dataIndex:'name',
flex:1,
editor:'textfield'
},{
header:'邮箱',
dataIndex:'email',
flex:1,
editor:'textfield'
},{
header:'电话',
dataIndex:'phone',
editor:'textfield'
}],
selType:'rowmodel',
plugins:[rowEditing],
tbar:[{
text:'添加',
handler: function() {
var data=[{
'id':'',
'name':'testrow',
'email':'[email protected]',
'phone':'123456'
}];
store.insert(0,data);//可以自定义在stroe的某个位置插入一行数据。
//store.loadData(data,true);//在store的最后添加一行数据
rowEditing.cancelEdit();
rowEditing.startEdit(0,0);
}
},'-',{
text:'删除',
handler:function(){
var records=grid.getSelectionModel().getSelection();
Ext.each(records,function(record){
//先通过ajax从后台删除数据，删除成功后再从页面删除数据
store.remove(record);
})
}
}]
});
})
（2）cellEditing
var cellEditing=Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit:2,
listeners: {
edit: function(editor,e) {
if(e.record.data.id) {//id由后台自动生成，编辑时
//有id,则说明是更新数据库。
} else {
//无id，则说明是向数据库中插入一条记录
}
e.record.data.name;
e.record.data.email;
e.record.data.phone;
}
}
});
var grid=Ext.create('Ext.grid.Panel', {
title:'grid添加一行数据与删除一行数据',
width:400,
height:300,
store:store,
bodyPadding:10,
renderTo:Ext.getBody(),
columns:[{
header:'姓名',
dataIndex:'name',
flex:1,
editor:'textfield'
},{
header:'邮箱',
dataIndex:'email',
flex:1,
editor:'textfield'
},{
header:'电话',
dataIndex:'phone',
editor:'textfield'
}],
selType:'cellmodel',
plugins:[cellEditing],
tbar:[{
text:'添加',
handler: function() {
var data=[{
'id':'',
'name':'testrow',
'email':'[email protected]',
'phone':'123456'
}];
store.insert(0,data);//可以自定义在stroe的某个位置插入一行数据。
//store.loadData(data,true);//在store的最后添加一行数据
cellEditing.cancelEdit();
cellEditing.startEditByPosition({row:0,column:0});
}
},'-',{
text:'删除',
handler: function() {
var records=grid.getSelectionModel().getSelection();
Ext.each(records, function(record) {
//先通过ajax从后台删除数据，删除成功后再从页面删除数据
store.remove(record);
})
}
}]
});
//tabs2.on('tabchange', function (tabPanel, newCard, oldCard) {
// if (newCard.title == "Admin") {
// // 获得iframe的window对象
// var contentWnd = newCard.getEl().query('iframe')[0].contentWindow;
// // 如果是第一次加载，则window.Ext对象为undefined
// if (typeof contentWnd.Ext != 'undefined') {
// contentWnd.loadData(); // 操作标签页中的元素
// }
// }
//});