extjs4 数据的增删改查操作 数据的操作

目前只做了增删改的操作，查的部分稍后会写上。

基于mvc模式的增删改操作

增



删



改 （触发事件有两种方式，一个是选择一项后点击修改，一个是双击记录）



view层先定义一个视图，增、改时会调用

Ext.define('yang.view.frameAAA.module.FrameAAACenterEditData', {
extend : 'Ext.window.Window',
alias : 'widget.frameAAACenterEditData',
title : 'Edit Window',
layout : 'fit',
autoShow : true,
shadow : true,
modal : true, // 遮罩，
toFrontOnShow : true,

initComponent : function() {
var me = this;
Ext.applyIf(me, {
items : [{
xtype : 'form',
items : [{
xtype : 'textfield',
name : 'id',
fieldLabel : 'id'
}, {
xtype : 'textfield',
name : 'firstname',
fieldLabel : 'firstname'
}, {
xtype : 'textfield',
name : 'lastname',
fieldLabel : 'lastname'
}]
}],
buttons : [{
text : 'Save',
action : 'save'
}, {
text : 'Cancel',
scope : this,
handler : me.close
}]
});
me.callParent(arguments);
}

});

然后就是controller写上触发事件

refs : [{
{
ref : 'frameAAACenterGridPanel',
selector : 'frameAAACenterGridPanel'
}],

init : function() {
this.control({
'frameAAACenterGridPanel' : {
itemdblclick : this.EditData
},
'frameAAACenterGridPanel button[action=addAction]' : {
click : this.addData
},
'frameAAACenterGridPanel button[action=modifyAction]' : {
click : this.modifyData
},
'frameAAACenterGridPanel button[action=deleteAction]' : {
click : this.deleteDatas
}
});
},

EditData : function(view, rec, item, index, e) {
var editWindow = Ext
.create('yang.view.frameAAA.module.FrameAAACenterEditData',{title:'Edit Data'});
editWindow.down('form').loadRecord(rec);
},

addData : function() {
var editWindow = Ext
.create('yang.view.frameAAA.module.FrameAAACenterEditData',{title:'Add Data'});
},

modifyData : function() {
var objGrid = this.getFrameAAACenterGridPanel();
if (objGrid.getSelectionModel().hasSelection()) {
var records = objGrid.getSelectionModel().getSelection();
if (records.length == 1) {
var record = records[0];
var editWindow = Ext
.create('yang.view.frameAAA.module.FrameAAACenterEditData',{title:'Add Data'});
editWindow.down('form').loadRecord(record);
} else {
Ext.Msg.alert('错误提示：', '只能选择一条记录进行修改！');
}
} else {
Ext.Msg.alert('错误提示：', '请选择一条记录进行修改！');
}
},

deleteDatas : function() {
var objGrid = this.getFrameAAACenterGridPanel();
if (objGrid.getSelectionModel().hasSelection()) {
var records = objGrid.getSelectionModel().getSelection();
var arr = new Array();
for (var i = 0; i < records.length; i++) {
var record = records[i];
arr[i] = record.get('id');
}
Ext.MessageBox.show({
title : '删除',
msg : '你确定删除以下id：' + arr,
buttons : Ext.MessageBox.OKCANCEL,
fn : function(btn) {
if (btn == 'ok') {
Ext.Msg.alert('删除成功', '你已成功删除以下id：' + arr);
this.close();
} else {
this.close();
}
}
});
} else {
Ext.Msg.alert('错误提示：', '请至少选择一条记录进行删除！');
}
}

其实增的部分就是修改的部分少一个加载数据的操作。