跟我一起学extjs5(18--模块的新增、改动、删除操作)
因为还没有和后台服务相联,因此数据是保存在本地localStorage中的,浏览器关闭这些数据并不会丢失。首先我们让Grid具有行内改动功能,双击单元格能够对其进行改动。在Grid.js中的initComponent函数中增加下面语句使Grid能够双击改动数据。clicksToEdit 假设设置成1,则会是单击改动。
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit : 2
});
this.plugins = [this.cellEditing];
如上设置后。双击单元格改动界面例如以下:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
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'
}
listeners : {
selectionChange : 'selectionChange'
},
在ModuleController.js中增加事件响应函数:
// 选中的记录发生变化过后的事件
selectionChange : function(model, selected, eOpts) { // 设置删除按钮的状态
this.getView().down('toolbar button#deletebutton')[selected.length > 0
? 'enable'
: 'disable'](); },
在ModuleController.js中增加删除事件的处理函数:
// 删除一条或多条记录
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 键来用鼠标进行多选记录的操作了。以下看看选择了一条记录和多条记录删除前的提示信息。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">