跟我一起学extjs5(18--模块的新增、改动、删除操作)
跟我一起学extjs5(18--模块的新增、改动、删除操作)
上节在Grid展示时做了一个金额单位能够手工选择的功能，假设你要增加其它功能。也仅仅要依照这个模式来操作即可了，比方说你想改变金额字段的颜色、小数位数、零值是否显示、货币符号、单位显示在标题栏或者跟在金额后面，凡是你能想到的须要手工设置的东西都能够加进来。 上面讲到的这些设置以后会加到程序里。在下载包里能够看到，就不做解说了。
这一节来使模块能够具有新增、改动、删除的操作。
因为还没有和后台服务相联，因此数据是保存在本地localStorage中的，浏览器关闭这些数据并不会丢失。首先我们让Grid具有行内改动功能，双击单元格能够对其进行改动。在Grid.js中的initComponent函数中增加下面语句使Grid能够双击改动数据。clicksToEdit 假设设置成1,则会是单击改动。
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit : 2
});
this.plugins = [this.cellEditing]; 如上设置后。双击单元格改动界面例如以下： 在Store的属性里增加:autoSync : true,这样改动完一个单元格后会自己主动保存数据。
以下对新增button的事件加以改动，使其能够新增一个记录。将ModuleController.js中的addRecord函数改为以下：
addRecord : function() {
var grid = this.getView().down('modulegrid');
var model = Ext.create(grid.getStore().model);
model.set('tf_id',0);
grid.getStore().insert(0, model);
}以下来增加数据的删除。删除能够选择一条。也能够选择多条进行删除。GridToolbar.js中给删除button加上事件。
{
text : '删除',
disabled : true,
glyph : 0xf014,
itemId : 'deletebutton',
handler : 'deleteRecords'
}
删除button初始状态是disabled的，在选中了记录之后才会变成enable，须要在Grid中增加一个事件：
listeners : {
selectionChange : 'selectionChange'
}, 在ModuleController.js中增加事件响应函数： // 选中的记录发生变化过后的事件
selectionChange : function(model, selected, eOpts) {
// 设置删除按钮的状态
this.getView().down('toolbar button#deletebutton')[selected.length > 0
? 'enable'
: 'disable']();
}, // 删除一条或多条记录
deleteRecords : function(button) {
var grid = this.getView().down('modulegrid'), selection = grid
.getSelectionModel().getSelection(), message = '';
if (selection.length == 1) // 假设仅仅选择了一条
message = ' 『' + selection[0].getNameValue() + '』 吗?';
else { // 选择了多条记录
message = '<ol>';
Ext.Array.each(grid.getSelectionModel().getSelection(), function(
record) {
message += '<li>' + record.getNameValue() + '</li>';
});
message += '</ol>';
message = '下面 ' + selection.length + ' 条记录吗?' + message;
}
Ext.MessageBox.confirm('确定删除', '确定要删除 <strong>'
+ this.getView().getViewModel().get('tf_title')
+ '</strong> 中的' + message, function(btn) {
if (btn == 'yes') {
grid.getStore().remove(grid.getSelectionModel().getSelection());
grid.getStore().sync();
}
})
},
为了可以多选记录。须要给Grid加上一个属性 multiSelect : true, 这样就能够按住Ctrl 和 shift 键来用鼠标进行多选记录的操作了。以下看看选择了一条记录和多条记录删除前的提示信息。
删除一条的提示信息：
删除多条的提示信息：
