17、手把手教你Extjs5(十七)模块的新增、修改、删除操作
2015-11-26 10:49
357 查看
上节在Grid展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你想改变金额字段的颜色、小数位数、零值是否显示、货币符号、单位显示在标题栏或者跟在金额后面,凡是你能想到的需要手工设置的东西都可以加进来。 上面讲到的这些设置以后会加到程序里,在下载包里可以看到,就不做讲解了。
这一节来使模块可以具有新增、修改、删除的操作。由于还没有和后台服务相联,因此数据是保存在本地localStorage中的,浏览器关闭这些数据并不会丢失。首先我们让Grid具有行内修改功能,双击单元格可以对其进行修改。在Grid.js中的initComponent函数中加入以下语句使Grid可以双击修改数据。clicksToEdit 如果设置成1,则会是单击修改。
如上设置后,双击单元格修改界面如下:
在Store的属性里加入:autoSync : true,这样修改完一个单元格后会自动保存数据。
下面对新增按钮的事件加以修改,使其可以新增一个记录。将ModuleController.js中的addRecord函数改为以下:
下面来加入数据的删除,删除可以选择一条,也可以选择多条进行删除。GridToolbar.js中给删除按钮加上事件。
删除按钮初始状态是disabled的,在选中了记录之后才会变成enable,需要在Grid中加入一个事件:
在ModuleController.js中加入事件响应函数:
在ModuleController.js中加入删除事件的处理函数:
为了能够多选记录,需要给Grid加上一个属性 multiSelect : true, 这样就可以按住Ctrl 和 shift 键来用鼠标进行多选记录的操作了。下面看看选择了一条记录和多条记录删除前的提示信息。
删除一条的提示信息:
删除多条的提示信息:
这一节来使模块可以具有新增、修改、删除的操作。由于还没有和后台服务相联,因此数据是保存在本地localStorage中的,浏览器关闭这些数据并不会丢失。首先我们让Grid具有行内修改功能,双击单元格可以对其进行修改。在Grid.js中的initComponent函数中加入以下语句使Grid可以双击修改数据。clicksToEdit 如果设置成1,则会是单击修改。
this.cellEditing = new Ext.grid.plugin.CellEditing({ clicksToEdit: 2 }); this.plugins = [this.cellEditing];
如上设置后,双击单元格修改界面如下:
在Store的属性里加入:autoSync : true,这样修改完一个单元格后会自动保存数据。
下面对新增按钮的事件加以修改,使其可以新增一个记录。将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中给删除按钮加上事件。
{ text : '删除', disabled : true, glyph : 0xf014, itemId : 'deletebutton', handler : 'deleteRecords' }
删除按钮初始状态是disabled的,在选中了记录之后才会变成enable,需要在Grid中加入一个事件:
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 键来用鼠标进行多选记录的操作了。下面看看选择了一条记录和多条记录删除前的提示信息。
删除一条的提示信息:
删除多条的提示信息:
相关文章推荐
- 16、手把手教你Extjs5(十六)Grid金额字段单位MVVM方式的选择
- 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染
- 14、手把手教你Extjs5(十四)模块字段和Grid列的定义[2]
- 13、手把手教你Extjs5(十三)模块字段和Grid列的定义[1]
- 12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块
- 11、手把手教你Extjs5(十一)模块界面的总体设计
- 10、手把手教你Extjs5(十)自定义模块的设计
- 8、手把手教你Extjs5(八)自定义菜单2
- 7、手把手教你Extjs5(七)自定义菜单1
- 6、手把手教你Extjs5(六)继承自定义一个控件
- 用js 动态的更改类名为 ".correctControl" div 的 背景色
- rsyslog通过自定义json格式发送日志信息给logstash
- js解析map
- sublime text 3 有 javascript 提示插件吗?
- js操作textarea方法集合
- JsonToMap and getMapFromStrToMap
- js分页算法
- JSTL 嵌套函数的有效使用
- js获取url中的参数
- 百度链接提交自动推送JS代码版