Extjs4-数据的增删改
来源:互联网 发布:仙贝鸟升级数据 编辑:程序博客网 时间:2024/05/16 10:52
一般的项目中,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.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);
- }
- }
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'
- }]
- });
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的项目,都是摸着石头过河,一点一点积累起来的,并不是说我的这些文章起到了指导性的作用,而是实际开发过程中的一些体会和经验。所有项目,有很多种方法可以实现需求。
- Extjs4-数据的增删改
- extjs4 数据的增删改查操作 数据的操作
- Extjs4开发笔记(六)——数据的增删改
- Extjs4中grid的增删改操作
- Extjs4增删改查
- 数据的增删改
- 数据的增删改
- Extjs4.2mvc+struts2+mybatis实现数据的增删改(CUD)
- 数据字段的增删改
- 数据的增删改查
- 数据的增删改查
- mysql表数据的增删查改
- JS中JSON数据的增删改
- mybatis ---- 实现数据的增删改查
- MongoDB数据的增删改查
- sql 基础 ( 数据的增删改查 )
- MySQL表数据的增删改查
- html实现数据的增删查改
- INSTALL_FAILED_UPDATE_INCOMPATIBLE错误解决措施
- asp.net Panel 横向滚动,纵向自动扩展
- 反编译工具Reflector下载(集成FileGenerator和FileDisassembler)
- .Net GridView应用:分页
- 图片存储到SQLServer数据库里的界面代码。 .
- Extjs4-数据的增删改
- Windows Phone 8将采用云计算备份系统
- 内存对齐
- [转]C语言发展简史
- TCP拥塞状态的变迁
- 将DC保存到bmp
- 如何使用kobold2d来做一个简单的iphone游戏教程(第一部分)
- LINUX shell 根据关键字删除文件中的某行
- 给程序员推荐:一些文章资源和趣闻