跟我一起学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,这样修改完一个单元格后会自动保存数据。

下面对新增按钮的事件加以修改,使其可以新增一个记录。将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 键来用鼠标进行多选记录的操作了。下面看看选择了一条记录和多条记录删除前的提示信息。

删除一条的提示信息:

删除多条的提示信息:

跟我一起学extjs5(18--模块的新增、修改、删除操作)

时间: 2024-10-08 10:59:45

跟我一起学extjs5(18--模块的新增、修改、删除操作)的相关文章

跟我一起学extjs5(19--模块记录的拖放删除、拖放复制新增)

跟我一起学extjs5(19--模块记录的拖放删除.拖放复制新增) 网页其中的拖放(drag-drop)是比較有趣的操作,extjs5中非常好的封装了拖放的动作,也有各种类来支持,可是要学好"拖放"这个东西真是非常难,特别是象我这样英语不好的人.看不太懂官网上的说明,做一个拖放的操作起码得几天的时间. 以下完毕拖放删除的功能.即,选中一条记录或多条记录.然后拖动到"删除"button上.最后松开鼠标进行记录删除的操作.操作步骤: 1.给Grid添加新的配置,使其记录

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块)

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块) 上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.A

跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])

跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据]) 写了几个月,总算有点盼头了,最终要从后台取得数据了.后台的spring mvc 和 service 仅仅能简单的说说了,里面加了几十个类.有兴趣的下载了源代码自己看.以下画张通用的模块列表取数据的流程,这个流程是适用于全部的模块.我这个后台处理程序也是对全部的模块进行统一处理,包含数据查找,新增,改动,删除都是同样的. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==

跟我一起学extjs5(11--自定义模块的设计)

跟我一起学extjs5(11--自定义模块的设计) 从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下信息: 1.模块的基本信息 模块ID号:一个数字的ID号,可以根据此ID号的顺序将相同分组的模块放在一块. 模块分组:模块分到哪个组里,比如说业务模块1.业务模块2.系统设置.系统管理等. 模块标识:系统中唯一的模块的标识,一般这个标识等同于数据库

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成])

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成]) 对于大多web程序来说,后台是完成控制和处理的,前台就是一个展示工具,这个系统也是这样.在上一节中建立了四个模块,下面开始设计前后台的交互.将系统信息和模块.菜单信息传到前台,由前台来进行展示. 首先新建一个java bean类用来存放各种需要传到前台的数据,里面包括:系统信息.操作人员信息.服务人员信息.模块信息.菜单.现在只加入了这几个,以后还要加入各种 各样的权限设置.在com.jfok.server.co

跟我一起学extjs5(28--加入模块和菜单定义[1建立数据库和表])

跟我一起学extjs5(28--加入模块和菜单定义[1建立数据库和表]) 下面我们开始进入自定义系统的设计和各个组成部分的搭建工作. 首先在sql server中建立数据库,这里的数据的名字我定义为extjs5,然后需要建立模块的定义表,这个表里将存着系统中所有模块的定义信息.为了能有个直观的前后台的互动,先把模块和菜单这二个部分加进去,可以把菜单数据组织好后发送到前台去进行展示. 由于系统中的模块很多,需要分类,因此在先要设计一个"模块分组"的表,对于菜单也是一样,需要有一个&quo

跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])

跟我一起学extjs5(41--增加一个自定义模块[2销售合同加入菜单和模块展示]) 在前面一节销售合同模块的信息导入系统后,需要在菜单中加入这个模块,但是现在菜单模块没法利用此系统进行编辑(多模块的层次现在还没有加入),因此只能在数据库里加入一条记录了: 加入后,重新启动一下tomcat,进入系统,就能在菜单"合同管理"下,看到 "销售合同"的菜单条了,点击一下,看看结果吧. 以上是自动生成"销售合同"的模块界面,这个就是最初介绍的模块的列表.

跟我一起学extjs5(38--单个模块的设计[6取得模块列表数据])

跟我一起学extjs5(38--单个模块的设计[6取得模块列表数据]) 上一节中做好了前后台的程序,现在来看看取得数据的运行过程.在菜单中选择 "系统管理"--"模块分组".就可以看到下图,在渲染后grid后,会显示数据. 来看看ajax取得数据的url和数据. url的信息: Remote Address:[::1]:8888 Request URL:http://localhost:8888/app/rest/module/fetchdata.do?_dc=14

跟我一起学extjs5(42--单个模块的数据新增方式)

跟我一起学extjs5(42--单个模块的数据新增方式) 前面的章节中已经加入了一个自定义的模块,并且可以进行数据的新增.修改.删除的操作了,在这个基础上就可以大作文章了.这一节来设想几种新据新增的方式,并给出一些具体的解决方案. 看了我后台java源码的可以看出,所有的模块的新增.修改.删除全部是相同的处理,只是用了反射来生成各个实体bean,这样不管你有多少个业务bean,你的这部分代码是不用再增加了,只需要考虑一些逻辑处理上的操作即可,这些在后面会提到.基于这样的方式,我们可以定义多种数据