`

ExtJsCRUD组件实现

阅读更多
Crud组件实现:
/**
 * 定义命名空间
 */
Ext.namespace("Ext.darkness");

/*
 *CRUD面板基类,继承自EXT的Panel
 */
Ext.darkness.CrudPanel = Ext.extend(Ext.Panel, {
    
    /**
      *基本属性
      */
    gridPanel:null,
    gridPanelId: 'gridPanel' + this.ID,
    gridViewConfig: {},
    cm: new Ext.grid.CheckboxSelectionModel(),
    sm: new Ext.grid.CheckboxSelectionModel({
		dataIndex: this.ID
	}),//-列选择模式
    store: null,
    storeMapping: null,
    pageSize: null,
    
    keywordText: null,
    
    baseUrl: null,
    
    width: 800,
    height: 600,
 
 
    //构造器
    constructor: function(config){
        
        config = config || {};
        this.pageSize = config.pageSize || 10;
        
        this.keywordText = new Ext.form.TextField({
            name: 'keyword',
            anchor: '95%',
            maxLength: 25
        });
        
        var flag = this.store == null;
        if(flag){
            this.store = new Ext.data.JsonStore({
                id: this.ID,
                url: this.baseUrl + '?cmd=List',//默认的数据源地址,继承时需要提供
                root: "data",
                totalProperty: "totalCount",
                remoteSort: true,
                fields: this.storeMapping
            });
        } 
        
        this.cm.defaultSortable = true;
        
        var viewConfig = Ext.apply({
            forceFit: true
        }, this.gridViewConfig);
        
        this.gridPanel = new Ext.grid.GridPanel({
            id: Ext.id(),
            store: this.store,
            cm: this.cm,
            sm: this.sm,
            trackMouseOver: false,
            loadMask: true,
            //超过长度带自动滚动条
		    autoScroll:true,
		    border:false,
		    collapsible: true,
            animCollapse: false,
            viewConfig: viewConfig,
            listeners: {
                'celldblclick': {//双击时执行修改
                    fn: this.onEdit,
                    scope: this
                },
                'contextmenu':function(e) {
                    e.stopEvent();
                }
            },
            tbar: [{
                id: 'addButton',
                text: '添加',
                iconCls: 'addicon',
                tooltip: '添加新纪录',
                handler: this.create,
                scope: this
            }, '-',//'-'给工具栏按钮之间添加'|'
            {
                id: 'editButton',
                text: '编辑',
                iconCls: 'editicon',
                tooltip: '修改记录',
                handler: this.onEdit,
                scope: this
            }, '-', {
                text: '删除',
                iconCls: 'deleteicon',
                tooltip: '删除所选中的信息',
                handler: this.onRemove,
                scope: this
            }, '-', {
                text: '刷新',
                iconCls: 'refreshicon',
                tooltip: '刷新纪录',
                handler: this.onRefresh,
                scope: this
            }, '->',//'->'代表让工具栏按钮到右边去
            'Search: ', this.keywordText, {
                text: '查询',
                pressed: true,
                iconCls: 'serchopenroomrecord',
                handler: this.onSearch,
                scope: this
            }, '   '],
            //分页
            bbar: new Ext.PagingToolbar({
                pageSize: this.pageSize,
                store: this.store
            })
        });
        
        //this.gridPanel.bbar = null;
        
        if(this.view){
            Ext.apply(this.gridPanel,{
                view: this.view
            });
        }
        
        this.store.load({
            params: {
                start: 0,
                limit: this.pageSize
            }
        });
        
        var configs = Ext.apply({
            closable: true,
            autoScroll: true,
            layout: "fit",
            items:[this.gridPanel],
            /**
              *渲染数据
              */
            //链接
            linkRenderer: function(v){
                if (!v) 
                    return "";
                else 
                    return String.format("<a href='{0}' target='_blank'>{0}</a>", v);
            },
            //时间
            dateRender: function(format){
                format = format || "Y-m-d h:i";
                return Ext.util.Format.dateRenderer(format);
            }
        },config);
        
        //调用父类的构造器
        Ext.darkness.CrudPanel.superclass.constructor.call(this,configs);
    },
       
       
    /**
      *事件
      */
    //查询
    onSearch: function(){
        var keyword = this.keywordText.getValue();//得到输入框的值
        this.store.load({
            params: {
                start: 0,
                limit: 10,
                keyword: keyword
            }
        });
    },
    //刷新
    onRefresh: function(){
        this.store.removeAll();
        this.store.reload();
    },
    //初始化窗口(用于新增,修改时),继承后在createWin中调用该方法显示窗口
    initWin: function(width, height, status){
        var win = new Ext.Window({
            title: "信息(" + status + ")",
            width: width,
            height: height,
            modal: true,
            shadow: true,
			iconCls:"addicon",
			//不可以随意改变大小
			resizable:false,
			//是否可以拖动
			//draggable:false,
			defaultType:"textfield",
			labelWidth:100,
			collapsible:true, //允许缩放条
            closeAction : 'hide',
            closable:true,
            plain : true,
            //弹出模态窗体
			modal: 'true', 
			buttonAlign:"center",
			bodyStyle:"padding:10px 0 0 15px",
			/*
			listeners:{
			    "show":function() {
			        //当window show事件发生时清空一下表单
			        //this.fp.getForm().loadRecord(row);
			    }
			},*/

            items: [this.fp],
            buttons: [{
                text: "保存",
                handler: this.onSave,
                scope: this
            }, {
                text: "清空",
                handler: this.reset,
                scope: this
            }, {
                text: "关闭",
                handler: this.closeWin,
                scope: this
            }]
        });
        return win;
    },
    
    //显示(新增/修改)窗口
    showWin: function(status){ //createForm()需要在继承时提供,该方法作用是创建表单
        if (!this.win) {
            if (!this.fp) {
                this.fp = this.createForm();
            }
            this.win = this.createWin(status);
            this.win.on("close", function(){
                this.win = null;
                this.fp = null;
                this.store.reload();
            }, this);
        }
        //窗口关闭时,数据重新加载
        this.win.show();
    },
    //创建(新增/修改)窗口
    create: function(){
        this.showWin("Save");
        this.reset();
    },
    
    //数据保存[(新增/修改)窗口]
    onSave: function(){
        var id = this.fp.form.findField("Id").getValue();
        // if(EditTeacherInfofp.getForm().isValid())
        this.fp.form.submit({
            waitMsg: '正在保存。。。',
            url: this.baseUrl + "?cmd=" + (id ? "Update" : "Save"),
            method: 'POST',
            success: function(){
                this.closeWin();
                this.store.reload();
            },
            failure:function(form,action) {
                Ext.MessageBox.alert("提示!","信息操作失败!");
            },
            scope: this
        });
    },
    //(新增/修改)窗口上的清空
    reset: function(){
        if (this.win) 
            this.fp.form.reset();
    },
    //(新增/修改)窗口上的关闭
    closeWin: function(){
        if (this.win) 
            this.win.close();
        this.win = null;
        this.fp = null;
        this.store.reload();
    },
    //修改,双击行,或选中一行点击修改,
    onEdit: function(){
        if (this.gridPanel.selModel.hasSelection()) {
            var records = this.gridPanel.selModel.getSelections();//得到被选择的行的数组
            var recordsLen = records.length;//得到行数组的长度
            if (recordsLen > 1) {
                Ext.Msg.alert("系统提示信息", "请选择其中一项进行编辑!");
            }//一次只给编辑一行
            else {
                var record = this.gridPanel.getSelectionModel().getSelected();//获取选择的记录集
                //var id = record.get("id");
                this.showWin("Update");
                this.fp.form.loadRecord(record); //往表单(fp.form)加载数据
            }
        }
        else {
            Ext.Msg.alert("提示", "请先选择要编辑的行!");
        }
    },
    //删除,deleteIds为主键值
    onRemove: function(){
        var store = this.store;
        var baseUrl = this.baseUrl;
        if (this.gridPanel.selModel.hasSelection()) {
            var records = this.gridPanel.selModel.getSelections();//得到被选择的行的数组
            var recordsLen = records.length;//得到行数组的长度
            var deleteIds = "";
            for (var i = 0; i < recordsLen; i++) {
                var id = records[i].get(this.ID);
                if (i != 0) {
                    deleteIds += "," + id;
                }
                else {
                    deleteIds = id;
                }
            }
            
            //this.store.reload();这里能执行
            Ext.MessageBox.confirm('系统提示信息', '确定要删除所选的记录吗?', function(btn){
                if (btn == 'yes') {
                    var myCon = new Ext.data.Connection();
                    Ext.MessageBox.wait('正在删除数据中, 请稍候……'); //出现一个等待条
                    myCon.request({
                        url: baseUrl + '?cmd=Remove',
                        method: "POST",
                        params: {
                            'deleteIds': deleteIds
                        },
                        //callback : Function (Optional) options, success : Boolean ,response : Object 
                        callback: function(options, success, response){
                            Ext.MessageBox.hide();
                            if (success) {
                                Ext.Msg.alert("提示信息", "成功删除数据!", function(){
                                    store.reload();
                                }, this);
                            }
                            else {
                                Ext.MessageBox.alert("系统提示信息", "异步通讯失败,更新失败,请与管理员联系!");
                            }
                        }
                    }, this);
                }//if..yes
            }, this);
        }
        else {
            Ext.Msg.alert("提示", "请先选择要删除的行!");
        }
    }
});


使用方式:

TeacherInfoPanel = Ext.extend(Ext.darkness.CrudPanel, {
    id: "TeacherInfoPanelId",
    title: "教师信息管理",
    //width: 400,
	//height: 300,
    //这个是数据源url
    baseUrl: "Data/BaseInfo/TeacherInfo.aspx",
    storeMapping: ["teacherID","teacherName","teacherSex","postName","PID","teacherPassword","Id"],
	ID: "Id",
    
    createForm: function(){
        var formPanel = new Ext.form.FormPanel({
			plain:true,
			layout:"form",
			defaultType:"textfield",
			labelWidth:75,
            baseCls:"x-plain",
			//锚点布局-
			defaults:{anchor:"95%",msgTarget:"side"},
			buttonAlign:"center",
			bodyStyle:"padding:0 0 0 0",
			items:[{
			        name:"teacherID",
					fieldLabel:"<font color=red>教师编号</font>",
					readOnly:false
			},{
			        name:"teacherName",
					fieldLabel:"<font color=red>教师姓名</font>",
					allowBlank:false,
                    blankText:"教师姓名不允许为空",
                    regex:/^[\s\S]{1,10}$/,
                    regexText:"教师姓名请不要超过10个字符"
			},{        
			        name:"teacherSex",
					xtype:"combo",
					fieldLabel:"教师性别",
					//传入后台真实值value field /value
					hiddenName:"teacherSex",
					readOnly:true,
					mode:"local",
					displayField:"show",
					valueField:"value",
					triggerAction:"all",
					value:"男",
					store:new Ext.data.SimpleStore({
						fields:["show","value"],
						data:[["男","男"],["女","女"]]
					})
			},{
			        name:"postName",
					fieldLabel:"<font color=red>职称</font>",
					allowBlank:false,
                    blankText:"职称不允许为空",
                    regex:/^[\s\S]{1,10}$/,
                    regexText:"职称请不要超过10个字符"
			},{
			        name:"PID",
					fieldLabel:"身份证号",
					allowBlank:false,
                    blankText:"身份证号不允许为空",
					regex:/^[0-9.]{15,18}$/,
                    regexText:"身份证号为15-18位数字组成"
					
			},{   
			        name:"teacherPassword",
					fieldLabel:"密码",
					allowBlank:false,
                    blankText:"密码不允许为空",
					regex:/^[0-9.]{6,13}$/,
                    regexText:"密码为6-13位数字组成"
			},{
			        name: "Id",
			        xtype: "hidden"
			}]
	    });
			
        return formPanel;
    },
    createWin: function(status){
        return this.initWin(380, 300, status);
    },

 
    constructor: function(){
        
        this.sm = new Ext.grid.CheckboxSelectionModel();
        
        this.cm = new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),//获得行号
		    this.sm,{
		        header:"教师编号",
		        dataIndex:"teacherID",
		        tooltip:"教师唯一标识",
		        //可以进行排序
                sortable:true
	        },{
		        header:"教师姓名",
		        tooltip:"教师姓名",
		        dataIndex:"teacherName",
                sortable:true,
                renderer:function(value)
                {
                    return "<font color=#EE9572>"+value+"</font>";
                }
	        },{
		        header:"性别",
		        width:80,
		        tooltip:"性别",
		        dataIndex:"teacherSex",
                sortable:true
	        },{
		        header:"职称",
		        width:220,
		        tooltip:"职称",
		        dataIndex:"postName",
		        //可以进行排序
                sortable:true
	        },{
		        header:"身份证号",
		        tooltip:"教师身份证号",
		        width:130,
		        dataIndex:"PID",
                sortable:true,
                renderer:function(value)
                {
                    return "<b>"+value+"</b>";
                }
	        },{
		        header:"密码",
		        width:220,
		        tooltip:"密码",
		        dataIndex:"teacherPassword",
		        //可以进行排序
                sortable:true
	        },{
			    dataIndex: "Id"
			}
	    ]);
     
        TeacherInfoPanel.superclass.constructor.call(this);
        
    }
});


使用是,new TeacherInfoPanel()就可以了,实现这样的效果只需144行代码,怎么样!
看一下效果:
  • 大小: 39.8 KB
分享到:
评论
1 楼 a1439226817 2014-07-06  
能不能发下源码1439226817@qq.com

相关推荐

    extjs crud操作的例子

    在ExtJS中,CRUD操作是通过Grid Panel、Form Panels等组件实现的,这通常涉及到模型(Model)、存储(Store)和控制器(Controller)的协同工作。 本示例是关于如何在ExtJS中实现CRUD操作的一个教程。首先,我们从...

    ssh+extjs CRUD

    - **ExtJS**:一个强大的JavaScript库,专注于构建复杂的Web应用程序,提供了丰富的UI组件和数据处理能力,是实现前后端分离架构中的前端部分的理想选择。 #### 三、开发CRUD功能的步骤详解 1. **环境搭建** - ...

    extjs4mvc的crud

    在"extjs4mvc的crud"这个主题中,我们将深入探讨如何使用ExtJS 4的Model-View-Controller(MVC)架构来实现货物处理的创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作。 首先,了解MVC模式是...

    Hibernate+Spring+Struts2+ExtJS CRUD

    本文将深入探讨如何利用这些技术实现CRUD(创建、读取、更新和删除)功能,并通过ExtJS实现实时动态加载树形结构数据。 首先,SSH是一个流行的Java EE开发框架,它整合了Spring的依赖注入和事务管理、Struts2的MVC...

    SSH+ExtJs实现表单的增删改查CRUD

    在IT领域,SSH+ExtJS实现的CRUD(Create, Read, Update, Delete)操作是Web应用程序开发中的常见任务,通常用于构建数据管理界面。SSH指的是Struts2、Hibernate和Spring这三个开源Java框架的组合,而ExtJS则是一个...

    JSP + Servlet + ExtJS实现CRUD操作

    本项目是关于使用Java服务器页面(JSP)和Servlet技术,结合ExtJS前端框架,实现数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete),也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例,...

    ssh+extjs开发crud--经典

    3. **实现CRUD功能**:编写相应的Action、Service、DAO层代码,同时利用ExtJS前端组件完成数据展示和交互。 4. **调试与优化**:使用浏览器开发者工具检查Ajax请求和响应,确保数据正确传输。 通过上述步骤,不仅...

    ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能

    在本示例中,我们将深入探讨如何使用ExtJS实现动态加载grid,同时实现CRUD(创建、读取、更新、删除)操作和分页功能。 首先,让我们了解什么是Grid。在ExtJS中,Grid是一种数据网格组件,用于展示大量结构化数据。...

    s2sh ExtJS开发CRUD功能

    【s2sh ExtJS开发CRUD功能】是指使用Struts2、Spring和Hibernate这三大开源框架,结合ExtJS前端库来实现数据的创建(Create)、读取(Retrieve)、更新(Update)和删除/Delete)操作。这个组合常被称为s2sh架构,是Java ...

    Extjs-crud

    综上所述,"Extjs-crud"项目是利用ExtJS的Grid组件和CRUD操作,结合Javabean与数据库表的映射,实现了一个功能完善的前端数据管理界面。通过这个项目,开发者可以学习到如何在实际应用中整合ExtJS的组件和数据操作...

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能

    在IT行业中,构建Web应用程序是常见的任务,而“Hibernate+Spring+Struts2+ExtJS开发CRUD功能”是一个经典的Java Web开发框架组合,用于高效地实现数据的创建(Create)、读取(Read)、更新(Update)和删除...

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能实例

    在这个实例中,ExtJS将用于创建用户友好的界面,通过Ajax与后台进行通信,实现CRUD功能。开发者可以通过定义Store来连接后台数据源,GridPanel用于显示数据,FormPanel用于编辑和保存数据,而Ext.Ajax则用于发送异步...

    extjs实现增删查改

    总结来说,“extjs实现增删查改”涵盖了前端使用ExtJS组件进行数据操作,以及后端使用servlet、Spring和Hibernate进行数据处理的技术栈。这个过程涉及到了前端交互设计、数据模型管理、HTTP通信和数据库操作等多个...

    ExtJs4.1 treegrid CRUD 读取、新增、修改、删除

    实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 selcell:function(arow,acol){ this.editingPlugin.startEditByPosition({row:arow,column:acol}); }, selcell2:function(node,...

    基于ssh+extjs+oracle实现图书管理系统

    【SSH框架详解】 ...综上所述,"基于ssh+extjs+oracle实现图书管理系统"利用SSH框架进行后端业务逻辑处理,EXTJS作为前端交互界面,Oracle数据库存储并管理数据,共同构建了一个高效、易用的图书管理系统。

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能.doc

    5. **ExtJS前端展示:** 利用ExtJS的GridPanel、FormPanel等组件,结合AJAX技术,实现数据的动态加载和更新。 #### 四、总结 通过上述技术栈的集成,可以构建出一个功能完善、易于扩展的企业级应用系统。其中,...

    ExtJs2.0 SSH 实现简单结构与上传文件 数据库同步树形结构

    描述中提到的“文件上传”功能,通常在`ExtJs2.0`中通过FileUploadField组件来实现,配合后台SSH框架接收文件并保存到服务器。这一过程涉及到文件的验证、临时存储和持久化,需要考虑到文件大小限制、安全性和效率等...

Global site tag (gtag.js) - Google Analytics