上节在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 键来用鼠标进行多选记录的操作了。下面看看选择了一条记录和多条记录删除前的提示信息。

删除一条的提示信息:

删除多条的提示信息:

17、手把手教你Extjs5(十七)模块的新增、修改、删除操作的更多相关文章

  1. 21、手把手教你Extjs5(二十一)模块Form的自定义的设计

    前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1、可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能 ...

  2. 手把手教Linux驱动2-之模块参数和符号导出

    通过<手把手教Linux驱动1-模块化编程,玩转module>的学习,我们已经掌握了如何向内核加载一个模块,现在我们学习模块之间如何传递参数. 一.给模块传递参数 当我们加载一个模块到Li ...

  3. 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染

    Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...

  4. 18、手把手教你Extjs5(十八)模块记录的拖放删除、拖放复制新增

    网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一 ...

  5. 13、手把手教你Extjs5(十三)模块字段和Grid列的定义[1]

    这一节加入模块自定义字段,并根据这些字段生成model.然后再定义grid中的分组和列.从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高.先从模块字段的自定义开始.先看一下 ...

  6. 23、手把手教你Extjs5(二十三)模块Form的自定义的设计[2]

    在本节中将要加入各种类型的字段,在加入字段的时候由于可以一行加入多个字段,因此层次结构又多了一层fieldcontainer.form里面的主要层次结构如下: form -- fieldSet -- ...

  7. 22、手把手教你Extjs5(二十二)模块Form的自定义的设计[1]

    下面开始设计和完成一个简单的Form的自定义过程.先准备数据,在ModuleModel.js中的data属性下面,加入自定义Form的参数定义,下面的代码中定义了一个新的属性tf_formScheme ...

  8. 20、手把手教你Extjs5(二十)模块Grid的多列表方案

    对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容 ...

  9. 19、手把手教你Extjs5(十九)模块Grid的其他功能的设想

    经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作.由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中. 比如对 ...

随机推荐

  1. Arduino 极速入门系列–1 点亮 LED

    本篇内容为,使用 Arduino 点亮 LED 的做法示范.很简单的一个入门示范.我们让 LED 闪. 本篇使用到的工具和材料 Arduino Mini Pro 1 PCS Mini USB 数据线 ...

  2. xampp 提示 This setting can be configured in the file &quot;httpd-xampp.conf&quot;.

    错误提示如下: New XAMPP security concept: Access to the requested object is only available from the local ...

  3. group by是什么意思 mysql中

    mysql语法中group by是什么意思? 在百度中搜索半天,最后找到一篇解释比较好的(不是博文,是百度知道,很郁闷那么多网友怎么就没人解释的清楚),链接如下: http://zhidao.baid ...

  4. asp.net 操作INI文件的读写,读写操作本地ini配置文件

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  5. CCNP路由实验(3) -- 路由控制

    1.用distribute-list过滤路由在不同协议里的用法 在RIP里 在EIGRP里 在OSPF里 只接收奇数路由 只接收偶数路由 只接收被4整除的路由2.offset-list在不同协议里的用 ...

  6. bash构造tmux显示tmux ssh状态

    要求: 于tmux内部链接ssh什么时候, 假设有多个ssh主机. 我们要显示相应的主机ip要显示筛查 实现效果 编辑你的bashrc, 由于我习惯在root下操作, 所以/root/.bashrc. ...

  7. IIS配置HTTPS

    1,新建网站,选中类型为 https,然后更改SSL证书为你配置的SSL证书, 对于SSL证书的配置是这样的 点开第二步,然后点击 创建自签名证书 确定以后点开网站看到有个SSL, 双击进去,再选中 ...

  8. tomcat插件使用

    1.pom.xml添加插件 <build> <plugins> <!-- tomcat7插件 --> <!-- 注意:目前来说,maven中央仓库还没有tom ...

  9. 学JS的心路历程-JS支持面向对象?(一)

    昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...

  10. POJ2230 Watchcow

    原题链接 类欧拉回路,要求每条边被正反各经过一次,且从\(1\)出发并回到\(1\). 只需每次搜索该点的边时,将该点的边对应的邻接表头及时修改为下一条即可,因为邻接表恰好储存了正反方向的边,所以及时 ...