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':'one@.com',

'phone':'123321123'

},{

'id':"2",

'name':'two',

'email':'two@.com',

'phone':'456654321'

},{

'id':"3",

'name':'there',

'email':'there@.com',

'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':'testrow@.com',

'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':'testrow@.com',

'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(); // 操作标签页中的元素
// }
// }
//});