Extjs4开发笔记(六)――数据的增删改_extjs_MHZG
您的位置： >>
Extjs4开发笔记(六)――数据的增删改
上一章，我们介绍了动态Grid的显示，其地址是：Extjs4开发笔记(五)――动态grid，在上一章，我们只做了数据的显示，并没有添加、删除和修改功能，本章内容，介绍如何进行添加、删除和修改。
上一章，我们介绍了动态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}}
{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.currentP
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&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);&
&&&&&&&&&&&&}
&&&&&&&&}&
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',
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.currentP
panelStore.removeAll();
panelStore.load(currPage);
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
panel.down('#delete').setDisabled(!records.length);
this.openTab(panel,record.get('id'));
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.currentP
&&&&&&&&&&&&
&&&&&&&&&&&&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.currentP
&&&&&&&&&&&&
&&&&&&&&&&&&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'
Ext.define('SMS.store.bastore', {
extend: 'Ext.data.Store',
requires: 'SMS.model.beianlistmodel',
model: 'SMS.model.beianlistmodel',
pageSize: 20,
remoteSort: true,
autoLoad:true,
type: 'ajax',
url: '/server/getbeian.asp',
root: 'items',
totalProperty
simpleSortMode: true
listeners:{
update:function(store,record){
var currPage = store.currentP
//alert(record.get(&ID&))
Ext.Ajax.request({
url:'/server/getbeian.asp?action=save',
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.currentP
//alert(record.get(&ID&))
Ext.Ajax.request({
url:'/server/getbeian.asp?action=del',
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的项目，都是摸着石头过河，一点一点积累起来的，并不是说我的这些文章起到了指导性的作用，而是实际开发过程中的一些体会和经验。所有项目，有很多种方法可以实现需求。
最后，希望大家能通过阅读这些开发笔记，都有所提高、进步！下面列出所有开发笔记的链接。
源码下载：
推荐阅读：
Tags：&&&&&&&&在ExtJS中，想批量添加，删除Store里面的记录，应该怎么做_百度知道
在ExtJS中，想批量添加，删除Store里面的记录，应该怎么做
提问者采纳
查看Store文档面貌似addremoveAtremoveAll我般使用removeAt使用For循环store.data.length始进行--操作remove元素
其他类似问题
为您推荐：
财务管理的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！