Extjs4开发笔记(六)——数据的增删改

2023-10-29 16:48

本文主要是介绍Extjs4开发笔记(六)——数据的增删改,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

上一章,我们介绍了动态Grid的显示,其地址是:Extjs4开发笔记(五)——动态grid,在上一章,我们只做了数据的显示,并没有添加、删除和修改功能,本章内容,介绍如何进行添加、删除和修改。

一般的项目中,Gird功能不是很复杂的话,都会使用window来实现数据的添加、修改功能,而本实例中,由于使用了动态grid功能,这样就使得再使用动态window来实现数据的添加和修改就会变的非常困难。

幸好,Grid有RowEditing,下面,我们就用RowEditing来实现数据的添加和修改功能。在开始之前,我们先回顾下上一章的一些重点内容:

1、给Menu增加了field属性,使得我们在数据库中的一些字段可以被当做是Menu的节点集合中的对象来调用。

2、给菜单表增加了两个字段,分别是store和columns。在app/store/文件夹下,我们新建了bastore.js文件,那么再数据库中对应的字段中,填写内容为bastore,在columns字段中,我们添加了内容为{text:'序号',dataIndex:'ID'},{text:'公司名称',dataIndex:'kehu_name'}的数据。

最后,我们修改了Menu.js文件,使得Grid可以显示数据。

现在,我们修改columns中的数据为:

{text:'序号',dataIndex:'ID',width:50},{text:'公司名称',dataIndex:'kehu_name',width:260,editor:{allowBlank: false}},{text:'备案号',dataIndex:'beianhao',width:140,editor:{allowBlank: false}},{text:'备案密码',dataIndex:'beianpass',width:100,editor:{allowBlank: false}},{text:'备案邮箱',dataIndex:'beianemail',width:160,editor:{allowBlank: false}},{text:'备案邮箱密码',dataIndex:'emailpass',width:120,editor:{allowBlank: false}},{text:'备案账号',dataIndex:'beianzh',width:160,editor:{allowBlank: false}},{text:'账号密码',dataIndex:'beianzhpa',width:120,editor:{allowBlank: false}}

在这些数据中,将所有字段都列了出来,并且制定了editor中allowBlank的数据位flase,就是说,这些内容必须填写。

接下来,我们需要修改app/controller下的menu.js文件,增加一些功能,使其可以添加、删除信息。修改内容如下:

if (record.get('leaf')) { 
var panel = Ext.getCmp(record.get('id')); 
if(!panel){
Ext.require(['Ext.grid.*']);
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{
clicksToMoveEditor: 1,
autoCancel: true
});
panel = Ext.create("Ext.grid.Panel",{
store:record.get('stores'),
columns:record.get('columns'),
errorSummary:false,
title: record.get('text'),
id:record.get('text')+record.get('id'),
columnLines: true,
bodyPadding:0,
closable: true,
bbar: Ext.create('Ext.PagingToolbar', {
store: record.get('stores'),
displayInfo: true,
displayMsg: '显示 {0} - {1} 条,共计 {2} 条',
emptyMsg: "没有数据"
}),
dockedItems: [{
xtype: 'toolbar',
items: [{
text: '增加信息',
iconCls: 'icon-add',
handler: function(){
rowEditing.cancelEdit();
var panelStore = this.up("panel").getStore();
var panelModel = this.up("panel").getSelectionModel();
panelStore.insert(0,panelModel);
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: '删除信息',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = panel.getView().getSelectionModel().getSelection()[0];
var panelStore = this.up("panel").getStore();
if (selection) {
panelStore.remove(selection);
}
}
}, '-' ,{
text:'刷新数据',
iconCls:'icon-refresh',
handler:function(){
var panelStore = this.up("panel").getStore();
var currPage = panelStore.currentPage;
panelStore.removeAll();
panelStore.load(currPage);
}
}]
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
panel.down('#delete').setDisabled(!records.length);
}
}
})
this.openTab(panel,record.get('id'));
}else{
var main = Ext.getCmp("content_panel");
main.setActiveTab(panel); 
}
} 

代码中,启用了插件rowEditing,增加了一个toolbar,上面添加了三个按钮,分别是添加信息,删除信息和刷新数据。添加信息的按钮,我们创建了一个handler,并且在其中获取了gird的Store和Model,并将其插入到grid的store中,删除信息的按钮中,设想这个按钮在没有选中任何行的时候,是不可用的,所以设置其disabled为true。还设置了handler,并且通过获取选择的行,将其从grid 的store中删除。并且,我们为grid增加了一个监听selectionchange,这样,我们就可以在选择中一条数据后,让删除信息的按钮变的可用。

目前,当点击添加按钮并添如信息后,只是存在于grid的store中,并没有将数据更新到数据库中,删除信息也是一样。接下来,需要修改app/store下的bastore.js,使其可以更新到数据中。

bastore.js:

Ext.define('SMS.store.bastore', {
extend: 'Ext.data.Store',
requires: 'SMS.model.beianlistmodel',
model: 'SMS.model.beianlistmodel',
pageSize: 20,
remoteSort: true,
autoLoad:true,
proxy: {
type: 'ajax',
url: '/server/getbeian.asp',
reader: {
root: 'items',
totalProperty  : 'total'
},
simpleSortMode: true
},
listeners:{
update:function(store,record){
var currPage = store.currentPage;
//alert(record.get("ID"))
Ext.Ajax.request({
url:'/server/getbeian.asp?action=save',
params:{
id : record.get("ID"),
kehu_name:record.get("kehu_name"),
beianhao:record.get("beianhao"),
beianpass:record.get("beianpass"),
beianemail:record.get("beianemail"),
emailpass:record.get("emailpass"),
beianzh:record.get("beianzh"),
beianzhpa:record.get("beianzhpa"),
},
success:function(response){
store.removeAll();
store.load(currPage);
}
});
},
remove:function(store,record){
var currPage = store.currentPage;
//alert(record.get("ID"))
Ext.Ajax.request({
url:'/server/getbeian.asp?action=del',
params:{
id : record.get("ID")
},
success:function(response){
store.removeAll();
store.load(currPage);
}
});
}
},
sorters: [{
property: 'ID',
direction: 'DESC'
}]
});

代码中,为store增加了两个监听,update和remove,并且将数据通过AJAX发送到服务端,在服务端进行处理,这里,只使用了update和remove。store中还有个add方法,此方法也是增加一条数据,按照常理来说。这个方法才是增加数据,但是我使用了add方法之后,点击添加信息,就会添加一条空数据,索性就使用update方法,将id值也发送到服务端,在服务端进行处理,服务端处理流程是:接收id值,判断id值是否为空,如果为空,则新增数据,如果不为空,则更新数据。

至此,一个grid的功能全部完成了。而且本项目所有的功能,都是如此,这样,只要再数据库中插入相应的行,在app/store和app/model中建立相关的js就可以了。至于其他功能,就不在此一一例举了。

声明一点,这个开发笔记实施到最后,有一些东西已经脱离了MVC的范畴,而且也没想到六章内容就结束了这个项目。从文章一到六,只是起一个抛砖引玉的作用。由于Extjs4有很大的变动,所以任何基于Extjs4.x MVC的项目,都是摸着石头过河,一点一点积累起来的,并不是说我的这些文章起到了指导性的作用,而是实际开发过程中的一些体会和经验。所有项目,有很多种方法可以实现需求。

最后,希望大家能通过阅读这些开发笔记,都有所提高、进步!

源码下载:http://www.mhzg.net/a/201112/2011121517480473.html

这篇关于Extjs4开发笔记(六)——数据的增删改的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/301976

相关文章

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分,使用python生成公钥与私钥,然后保存在两个文

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》:本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面,查看左下角从左

SpringBoot中4种数据水平分片策略

《SpringBoot中4种数据水平分片策略》数据水平分片作为一种水平扩展策略,通过将数据分散到多个物理节点上,有效解决了存储容量和性能瓶颈问题,下面小编就来和大家分享4种数据分片策略吧... 目录一、前言二、哈希分片2.1 原理2.2 SpringBoot实现2.3 优缺点分析2.4 适用场景三、范围分片

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

Redis分片集群、数据读写规则问题小结

《Redis分片集群、数据读写规则问题小结》本文介绍了Redis分片集群的原理,通过数据分片和哈希槽机制解决单机内存限制与写瓶颈问题,实现分布式存储和高并发处理,但存在通信开销大、维护复杂及对事务支持... 目录一、分片集群解android决的问题二、分片集群图解 分片集群特征如何解决的上述问题?(与哨兵模

浅析如何保证MySQL与Redis数据一致性

《浅析如何保证MySQL与Redis数据一致性》在互联网应用中,MySQL作为持久化存储引擎,Redis作为高性能缓存层,两者的组合能有效提升系统性能,下面我们来看看如何保证两者的数据一致性吧... 目录一、数据不一致性的根源1.1 典型不一致场景1.2 关键矛盾点二、一致性保障策略2.1 基础策略:更新数

Oracle 数据库数据操作如何精通 INSERT, UPDATE, DELETE

《Oracle数据库数据操作如何精通INSERT,UPDATE,DELETE》在Oracle数据库中,对表内数据进行增加、修改和删除操作是通过数据操作语言来完成的,下面给大家介绍Oracle数... 目录思维导图一、插入数据 (INSERT)1.1 插入单行数据,指定所有列的值语法:1.2 插入单行数据,指