文档章节

ExtJsCRUD组件实现

暗之幻影
 暗之幻影
发布于 2015/09/23 16:59
字数 1474
阅读 15
收藏 0

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行代码,怎么样!
看一下效果:

 


本文转载自:http://depravedangel.iteye.com/blog/336707

暗之幻影
粉丝 20
博文 377
码字总数 71245
作品 0
南京
高级程序员
私信 提问
Web开发系列 - ExtJS

什么是EXT 1、ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用JavaScript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、P...

长征2号
2017/08/08
0
0
从零实现Vue的组件库(十四)- RadioGroup 实现

基于 组件进行二次封装的 RadioGroup 组件 RadioGroup 组件的难点在于: 与 之间的联动关系、数据绑定关系,使得 可以单独使用或者组合; 利用插槽可以方便扩展 。 1. 实例 代码 实例地址:R...

FatGe
02/06
0
0
从零实现Vue的组件库(十五)- Checkbox-Group 实现

基于 组件进行二次封装的 CheckboxGroup 组件 CheckboxGroup 组件与 RadioGroup 组件类似,但是也存在不同点,在于 CheckboxGroup 为多选组,并且需要 Checkbox 可以单独使用。 1. 实例 代码...

FatGe
02/15
0
0
从零实现Vue的组件库(十二)- Table 实现

基于Table标签的展示数据组件。 Table 组件主要特点在于: 组件 的解耦,减少重复代码; 良好的扩展性,可以通过自定义列模板来适应不同的业务场景。 1. 实例 代码 实例地址:Table 实例 代码...

FatGe
01/25
0
0
从零实现Vue的组件库(十)- Select 实现

当选项过多时,使用下拉菜单展示并选择内容。 Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显; 单选、多选的区分,以及对应处理。 1. 实例 代码 实例地址:Selec...

FatGe
01/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
7
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
9
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部