首先,编辑一下yepnope,生成yepnope.jsp,如下:

<%@ page language="java" pageEncoding="UTF-8"%>
<script type="text/javascript" src="${ctx}/resources/loader/yepnope.min.js"></script>
<script type="text/javascript">
    pagesize=eval('(${fields.pagesize==null?"{}":fields.pagesize})');
    yepnope({
            load : [ //extjs
                     "${ctx}/resources/extjs/resources/css/ext-all.css",
                     //"${ctx}/resources/extjs/resources/css/yourtheme.css",
                     "${ctx}/resources/extjs/resources/css/xtheme-blue.css",
                     "${ctx}/resources/extjs/adapter/ext/ext-base.js",
                     "${ctx}/resources/extjs/ext-all.js",
                     "${ctx}/resources/extjs/ext-lang-zh_CN.js",
                     "${ctx}/resources/extjs/ux/ExtMD5.js",
                     "${ctx}/resources/extjs/ux/TabCloseMenu.js",
                     "${ctx}/resources/extjs/ux/SearchField.js",
                     "${ctx}/resources/extjs/ux/ProgressBarPager.js",
                     //通用
                     "${ctx}/resources/js/Ext.ux.override.js",
                     "${ctx}/resources/js/share.js",
                     "${ctx}/resources/js/shareux.js",
                     "${ctx}/resources/js/ux/DeptTreePanel.js",
                     "${ctx}/resources/js/ux/DeptUserPanel.js",
                     "${ctx}/resources/js/ux/UploadWindow.js",
                     //jquery
                     "${ctx}/resources/jquery/jquery-1.8.1.min.js",
                     "${ctx}/resources/jquery/jquery.json-2.2-min.js",
                     "${ctx}/resources/css/default.css",
                     "${ctx}/resources/jquery/fixtable.js",
                     "${ctx}/resources/css/ext-patch.css",
                       //fckeditor
                     '${ctx}/resources/extjs/ux/FieldLabeler.js',
                     '${ctx}/resources/fckeditor/fckeditor.js'
                     ],
            complete : function() {
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'under';//qtip,title,under,side
                Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
                ctx = "${ctx}";
                currentUser = {
                  userId:'${user.userId}',
                  account:'${user.account}',
                  realName:'${user.realName}',
                  deptId:'${user.dept.deptId}'
                }
                Ext.BLANK_IMAGE_URL = '${ctx}/resources/extjs/resources/images/default/s.gif';
                }
            });
</script>

大框架有了,具体页面如下:

jsp页面如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/views/commons/taglibs.jsp"%>
<html>
<head>
    <script type="text/javascript">
    yepnope({
        load:[
        '${ctx}/resources/js/user/application/AppFormWin.js',
        '${ctx}/resources/js/user/application/AppGridPanel.js'],        
        complete:function(){
            var testGrid = new Ext.basic.AppGridPanel({
                height : index.tabPanel.getInnerHeight() - 1,
                width:index.tabPanel.getInnerWidth() - 1,
                actionJson:${actionJson},
                id: '${param.id}' + '_panel',
                renderTo:'${param.id}'
            });
        }
    });    
</script>
</head>

<body>
    <div id="${param.id}"></div>
</body>
</html>

AppGridPanel如下:

Ext.ns("Ext.basic");

Ext.basic.AppGridPanel = Ext.extend(Ext.grid.GridPanel, {

constructor : function(_config) {
        Ext.apply(this, _config || {});

this.pageSize = 20;
        this.Url = {
            all : ctx + '/baseApplication/queryListForPage',// 加载所有
            insertUrl : ctx + '/baseApplication/insert',
            updateUrl : ctx + '/baseApplication/update',
            deleteUrl : ctx + '/baseApplication/delete'
        };
        /** 顶部工具栏 */
        this.toolbar = new Ext.ActionToolbar({
                    actionPanel : this,
                    actionJson : this.actionJson,
                    addFunction : this.showAddWindow,
                    editFunction : this.showEditWindow,
                    deleteFunction : this.deleteData
                });

/** 基本信息-数据源 */
        this.store = new Ext.data.Store({
                    remoteSort : true,
                    baseParams : {
                        start : 0,
                        limit : this.pageSize
                    },
                    proxy : new Ext.data.HttpProxy({// 获取数据的方式
                        method : 'POST',
                        url : this.Url.all
                    }),
                    reader : new Ext.data.JsonReader({// 数据读取器
                        totalProperty : 'results', // 记录总数
                        root : 'rows' // Json中的列表数据根节点
                    }, ['id', 'appName', 'appDesc','appType','displayIndex','iconCls'])
                });

/** 基本信息-选择模式 */
        this.selModel = new Ext.grid.CheckboxSelectionModel({
                    singleSelect : true,
                    listeners : {
                        'rowselect' : function(selectionModel, rowIndex, record) {
                            this.toolbar.enableEditDelete();
                        },
                        'rowdeselect' : function(selectionModel, rowIndex,
                                record) {
                            if (!selectionModel.hasSelection()) {
                                this.toolbar.disableEditDelete();
                            }
                        },
                        scope : this
                    }
                });
        /** 基本信息-数据列 */
        this.colModel = new Ext.grid.ColumnModel({
                    columns : [this.selModel, {
                                header : '应用名称',
                                dataIndex : 'appName'
                            },{
                                header : '应用类型',
                                dataIndex : 'appType',
                                renderer:function(value){
                                  if(value == 1){
                                    return '系统应用';
                                  }else if(value == 2){
                                    return '外部应用';
                                  }
                                }
                            }, {
                              header:'样式',
                              dataIndex:'iconCls'
                            },{
                              header:'显示顺序',
                              dataIndex:'displayIndex'
                            },{
                                header : '应用描述',
                                dataIndex : 'appDesc',
                                width:300
                            }]
                });

/** 底部工具条 */
        this.bbar = new Ext.PagingToolbar({
                    pageSize : this.pageSize,
                    store : this.store,
                    displayInfo : true

});
        Ext.basic.AppGridPanel.superclass.constructor.call(this, {
                    store : this.store,
                    colModel : this.colModel,
                    selModel : this.selModel,
                    bbar : this.bbar,
                    tbar : this.toolbar,
                    autoScroll : 'auto',
                    region : 'center',
                    loadMask : true,
                    stripeRows : true
                });
        this.store.load();
    },
/** 添加组件 */
    showAddWindow : function() {
        if (!this.addWindow) {
            this.addWindow = new Ext.basic.AppFormWin({
                        store : this.store,
                        saveUrl : this.Url.insertUrl
                    });
        }
        this.addWindow.reset();
        this.addWindow.show();
    },
    /** 修改组件 */
    showEditWindow : function() {
        var record = this.getSelectionModel().getSelected();
        if (!this.editWindow) {
            this.editWindow = new Ext.basic.AppFormWin({
                        store : this.store,
                        saveUrl : this.Url.updateUrl
                    });
        }
        this.editWindow.reset();
        this.editWindow.show();
        this.editWindow.loadRecord(record);
    },
    /** 删除信息 */
    deleteData : function() {
        /** 选中的记录 */
        var record = this.getSelectionModel().getSelected();
        /** 存放id的数组 */
            Ext.MessageBox.confirm('提示', '你确定要删除选中的记录吗?', function(btn) {
                        if (btn == 'yes') {
                            Ext.Ajax.request({
                                        url : this.Url.deleteUrl,
                                        params : {
                                            id : record.data.id
                                        },
                                        success : function(response, options) {
                                            var text = Ext
                                                    .decode(response.responseText);
                                            Ext.Msg.alert('提示', text.msg,function(){
                                                this.store.reload();
                                            },this);
                                        },
                                        failure : function() {
                                            Ext.MessageBox.alert('提示', '请求失败!');
                                        },
                                        scope : this
                                    });

}
                    }, this);
    }

});

AppFormWin如下:

Ext.ns("Ext.basic");

Ext.basic.AppGridPanel = Ext.extend(Ext.grid.GridPanel, {

constructor : function(_config) {
        Ext.apply(this, _config || {});

this.pageSize = 20;
        this.Url = {
            all : ctx + '/baseApplication/queryListForPage',// 加载所有
            insertUrl : ctx + '/baseApplication/insert',
            updateUrl : ctx + '/baseApplication/update',
            deleteUrl : ctx + '/baseApplication/delete'
        };
        /** 顶部工具栏 */
        this.toolbar = new Ext.ActionToolbar({
                    actionPanel : this,
                    actionJson : this.actionJson,
                    addFunction : this.showAddWindow,
                    editFunction : this.showEditWindow,
                    deleteFunction : this.deleteData
                });

/** 基本信息-数据源 */
        this.store = new Ext.data.Store({
                    remoteSort : true,
                    baseParams : {
                        start : 0,
                        limit : this.pageSize
                    },
                    proxy : new Ext.data.HttpProxy({// 获取数据的方式
                        method : 'POST',
                        url : this.Url.all
                    }),
                    reader : new Ext.data.JsonReader({// 数据读取器
                        totalProperty : 'results', // 记录总数
                        root : 'rows' // Json中的列表数据根节点
                    }, ['id', 'appName', 'appDesc','appType','displayIndex','iconCls'])
                });

/** 基本信息-选择模式 */
        this.selModel = new Ext.grid.CheckboxSelectionModel({
                    singleSelect : true,
                    listeners : {
                        'rowselect' : function(selectionModel, rowIndex, record) {
                            this.toolbar.enableEditDelete();
                        },
                        'rowdeselect' : function(selectionModel, rowIndex,
                                record) {
                            if (!selectionModel.hasSelection()) {
                                this.toolbar.disableEditDelete();
                            }
                        },
                        scope : this
                    }
                });
        /** 基本信息-数据列 */
        this.colModel = new Ext.grid.ColumnModel({
                    columns : [this.selModel, {
                                header : '应用名称',
                                dataIndex : 'appName'
                            },{
                                header : '应用类型',
                                dataIndex : 'appType',
                                renderer:function(value){
                                  if(value == 1){
                                    return '系统应用';
                                  }else if(value == 2){
                                    return '外部应用';
                                  }
                                }
                            }, {
                              header:'样式',
                              dataIndex:'iconCls'
                            },{
                              header:'显示顺序',
                              dataIndex:'displayIndex'
                            },{
                                header : '应用描述',
                                dataIndex : 'appDesc',
                                width:300
                            }]
                });

/** 底部工具条 */
        this.bbar = new Ext.PagingToolbar({
                    pageSize : this.pageSize,
                    store : this.store,
                    displayInfo : true

});
        Ext.basic.AppGridPanel.superclass.constructor.call(this, {
                    store : this.store,
                    colModel : this.colModel,
                    selModel : this.selModel,
                    bbar : this.bbar,
                    tbar : this.toolbar,
                    autoScroll : 'auto',
                    region : 'center',
                    loadMask : true,
                    stripeRows : true
                });
        this.store.load();
    },
/** 添加组件 */
    showAddWindow : function() {
        if (!this.addWindow) {
            this.addWindow = new Ext.basic.AppFormWin({
                        store : this.store,
                        saveUrl : this.Url.insertUrl
                    });
        }
        this.addWindow.reset();
        this.addWindow.show();
    },
    /** 修改组件 */
    showEditWindow : function() {
        var record = this.getSelectionModel().getSelected();
        if (!this.editWindow) {
            this.editWindow = new Ext.basic.AppFormWin({
                        store : this.store,
                        saveUrl : this.Url.updateUrl
                    });
        }
        this.editWindow.reset();
        this.editWindow.show();
        this.editWindow.loadRecord(record);
    },
    /** 删除信息 */
    deleteData : function() {
        /** 选中的记录 */
        var record = this.getSelectionModel().getSelected();
        /** 存放id的数组 */
            Ext.MessageBox.confirm('提示', '你确定要删除选中的记录吗?', function(btn) {
                        if (btn == 'yes') {
                            Ext.Ajax.request({
                                        url : this.Url.deleteUrl,
                                        params : {
                                            id : record.data.id
                                        },
                                        success : function(response, options) {
                                            var text = Ext
                                                    .decode(response.responseText);
                                            Ext.Msg.alert('提示', text.msg,function(){
                                                this.store.reload();
                                            },this);
                                        },
                                        failure : function() {
                                            Ext.MessageBox.alert('提示', '请求失败!');
                                        },
                                        scope : this
                                    });

}
                    }, this);
    }

});

Controller如下:

package cn.edu.hbcf.plugin.project.materials.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.apache.commons.lang.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.edu.hbcf.common.constants.WebConstants;
import cn.edu.hbcf.common.utils.EncodingUtils;
import cn.edu.hbcf.common.vo.Criteria;
import cn.edu.hbcf.common.vo.ExtGridReturn;
import cn.edu.hbcf.common.vo.ExtPager;
import cn.edu.hbcf.common.vo.ExtReturn;
import cn.edu.hbcf.plugin.project.materials.pojo.ProjectMaterials;
import cn.edu.hbcf.plugin.project.materials.service.ProjectMaterialsService;
import cn.edu.hbcf.plugin.workflow.apply.pojo.Execution;
import cn.edu.hbcf.plugin.workflow.apply.pojo.JbpmTask;
import cn.edu.hbcf.plugin.workflow.apply.service.ExecutionService;
import cn.edu.hbcf.plugin.workflow.business.service.BusinessService;
import cn.edu.hbcf.plugin.workflow.createjpdl.pojo.JpdlNode;
import cn.edu.hbcf.plugin.workflow.createjpdl.service.JpdlNodeService;
import cn.edu.hbcf.plugin.workflow.historybusiness.pojo.HistoryBusiness;
import cn.edu.hbcf.plugin.workflow.historybusiness.service.HistoryBusinessService;
import cn.edu.hbcf.plugin.workflow.sponsor.pojo.Sponsor;
import cn.edu.hbcf.plugin.workflow.sponsor.service.SponsorService;
import cn.edu.hbcf.privilege.pojo.BaseUsers;
/**
 * 描述:无项目材料采购Controller
 * @author zhaorui
 * @date 2015-10-28
 */
@Controller
@RequestMapping("/projectMaterials")
public class ProjectMaterialsController {

@Autowired
    private ProjectMaterialsService service;
    /**
     * 描述:进入无项目材料采购的jsp路径
     * @return 进入无项目材料采购的jsp路径
     */
    @RequestMapping(method=RequestMethod.GET)
    public String getIndex(){
        return "/plugins/project/web/views/materials/materials";
    }
    /**
     * 描述:查询详细页所有的无项目材料采购信息
     * @param request
     * @param materials 根据billId查询 唯一标识
     * @param pager 分页
     * @return
     */
    @RequestMapping(value="/queryListForPage",method=RequestMethod.POST)
    @ResponseBody
    public ExtGridReturn queryListForPage(HttpServletRequest request, ProjectMaterials materials,ExtPager pager){
        Criteria criteria = new Criteria();
        if(pager.getStart()!=null && pager.getLimit()!=null){
            criteria.put("start", pager.getStart());
            criteria.put("limit", pager.getLimit());
        }
        criteria.put("billId", materials.getBillId());
        List<ProjectMaterials> list = service.queryListForPage(criteria);
        int total = service.getTotalCount(criteria);
        return new ExtGridReturn(total, list);
    }
    /**
     * 描述:新增无项目材料采购信息都数据库中
     * @param materials 要新增的无项目材料采购信息
     * @return
     */
    @RequestMapping(value="/insert",method=RequestMethod.POST)
    @ResponseBody
    public ExtReturn insert(ProjectMaterials materials){
        materials.setId(UUID.randomUUID().toString().replace("-", ""));
        int result = service.insert(materials);
        if(result>0){
            return new ExtReturn(true, "新增成功!");
        }
        return new ExtReturn(false, "新增失败!");
    }
    /**
     * 描述:修改无项目材料采购信息
     * @param materials 要修改的无项目材料采购信息
     * @return
     */
    @RequestMapping(value="/update",method=RequestMethod.POST)
    @ResponseBody
    public ExtReturn update(ProjectMaterials materials){
        int result = service.update(materials);
        if(result>0){
            return new ExtReturn(true, "修改成功!");
        }
        return new ExtReturn(false, "修改失败!");
    }
    /**
     * 描述:删除无项目材料采购信息
     * @param ids 批量删除,唯一标识一
     * @return
     */
    @RequestMapping(value="/delete",method=RequestMethod.POST)
    @ResponseBody
    public ExtReturn delete(String[] ids){
        int result = service.deleteAll(ids);
        if(result>0){
            return new ExtReturn(true, "删除成功!");
        }
        return new ExtReturn(false, "删除失败!");
    }
     /**
     * 描述:增加一行统计装修预算的数据
     * @param materials 条件
     * @return
     */
    @RequestMapping(value="/getSumTotol",method=RequestMethod.POST)
    @ResponseBody
    public ExtReturn getSumTotol(ProjectMaterials materials){
        return new ExtReturn(true, service.getSumTotol(materials));
    }
}

extjs经典的增删改查的更多相关文章

  1. 快速开发平台WebBuilder中ExtJS表格的增删改查

    使用WebBuilder可实现表格的自动增删改查功能,而无需编写前台脚本和后台SQL. WebBuilder开源项目地址:http://www.putdb.com 自动生成的页面: <!DOCT ...

  2. SQLite中的增删改查

    虽然android提供了sql查询的封装方法,但是理解起来还是麻烦,所以我这里用sql语句来完成工作. 首先是建立一个类,继承SQLiteOpenHelper 这里面会建立一个数据库,并且初始化一个表 ...

  3. MVC4 经典增删改查详情demo

    MVC4 经典增删改查详情demo 源码 不解释 Mvc4增删改查详情Demo.7z public ActionResult Detail(int? id)  {    ViewData.Model ...

  4. asp.net下利用MVC模式实现Extjs表格增删改查

    在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...

  5. primefaces4.0基本教程以及增删改查

    最近试着用了用primefaces4.0,准备写一个基本的增删改查以及分页程序,但在写的过程中发现了很多问题,本想通过百度.谷歌解决,但无奈中文资料非常少,笔者在坑中不停的打滚,终于完成了一个有着基本 ...

  6. MyBatis学习系列二——增删改查

    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...

  7. 初试KONCKOUT+WEBAPI简单实现增删改查

    初试KONCKOUT+WEBAPI简单实现增删改查 前言 konckout.js本人也是刚刚接触,也是初学,本文的目的是使用ko和asp.net mvc4 webapi来实现一个简单增删改查操作.Kn ...

  8. SQL Server学习之路(六):“增删改查”之“查”

    0.目录 1.前言 2.最基本的SQL查询语句 3.select...from... 3.1 "*"与"Top num *" 3.2 查询指定列 3.3 Isn ...

  9. MyBatis的增删改查。

    数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改,并且对程序接口做了一些调整,以及对一些问题进行了解答. 1.调整后的结构图: 2.连接数据库文件配置分离: 一般的程序都会把连 ...

随机推荐

  1. 使用Fabric模块实现自动化运维

    一.安装软件 简介:Fabric是基于Python实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括:命令执行.文件上 ...

  2. jQuery.toggleClass() 和detach()方法详解

    一.toggleClass()函数: toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名.所谓"切换",就是如果该元素上已存在指定的类名 ...

  3. eclipse缺省的Server没有weblogic

    转自:http://www.javakfz.com/index.php/08/06/471.html eclipse缺省的Server没有weblogic,因此要下载个weblogic的插件.这个过程 ...

  4. 【树莓派】【转载】Raspberry Pi (树莓派)折腾记

    在网上看到一篇对树莓派折腾记录比较详细的文章,时间比较早,但是有些东西没变. 对于新手而言,还是有点参考价值.文章参见:http://skypegnu1.blog.51cto.com/8991766/ ...

  5. vue - check-versions.js for child_process

    webpack之类的配置文件. webpack.base.conf.js

  6. npm显示已安装的包

    npm list -g --depth 0 显示安装过的npm包!

  7. hookup_2.10-0.2.3.jar包下载

    hookup_2.10-0.2.3.jar包下载地址,自己也做一个记录.同一时候也给须要的朋友提供一个方便,希望对大家有所帮助.下载地址:http://www.59biye.com/jar/cont/ ...

  8. 算法笔记_059:蓝桥杯练习 Anagrams问题(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的.例如,“Unclea ...

  9. php读取ini(init)文件

    <?php header('content-type:text/html;charset=utf-8'); //读取.init文件 $config_file_path = './config/d ...

  10. 坑爹的Adprep32.exe

    今天看书的时候,看到用ADSI设置Universal Group Membership Caching,就想到用.Net Framework来实现,找了半天,才找到System.directoryse ...