ExtJS6.2开发-用户管理(一)

一、创建主页目录
1)在app目录下创建main\core\user目录
2)在user目录下分别创建view、model、store、controller、component目录
建立好的文件目录如下图：

二、创建模型文件
１.model\maCrUserModel.js文件代码如下：

Ext.define('appcenter.main.core.user.model.maCrUserModel', {	
	extend: "Ext.data.Model",	
	fields: [
		        { name: 'pkUser', type: 'string' },
		        { name: 'userCode', type: 'string' },
		        { name: 'userName', type: 'string' },
		        { name: 'userAccount', type: 'string' },
		        { name: 'phone', type: 'string' },
		        { name: 'email', type: 'string' },
		        { name: 'fkOrg', type: 'string' },
		        { name: 'remark', type: 'string' },
		        { name: 'isLock', type: 'int' },
		        { name: 'dr', type: 'int' },
		        { name: 'ts', type: 'auto' },
		        { name: 'createUserId', type: 'string' },
		        { name: 'createUser', type: 'string' },
		        { name: 'createTime', type: 'string' }, 
		        { name: 'modifyUserId', type: 'string' },
		        { name: 'modifyUser', type: 'string' },
		        { name: 'modifyTime', type: 'string' }
		]
});

二、创建数据文件
１.store\maCrUserStore.js文件代码如下：

Ext.define('appcenter.main.core.user.store.maCrUserStore', {
    extend: 'Ext.data.Store',    
    alias: 'store.maCrUserStore',    
    storeId:'maCrUserStore' ,  
    model: 'appcenter.main.core.user.model.maCrUserModel',  
    pageSize: 50,  
    proxy: {
        type: "rest",        
        actionMethods:{
            read : 'GET'
        },        
        api: {
        	read : '/appcenter-main/macruserweb/pagelist'
        },        
        reader: {
            type: 'json',
            rootProperty: 'data', //rootProperty 属性告诉 store 从 JSON 文件中哪个地方查找记录
            totalProperty: 'totalSize'//让 store 知道从哪里读取记录总数
        }
    },    
    constructor: function () {
        var me = this;
        me.callParent(arguments);
    }
});

三、创建表格组件
１.component\maCrUserQueryTable.js文件代码如下：

Ext.define( 'appcenter.main.core.user.component.maCrUserQueryTable', {	 
	extend: 'Ext.grid.Panel',	 
	layout:'fit',
	alias : 'widget.maCrUserQueryTable',
	id: 'maCrUserQueryTable',   
	columnLines:true,
	editor: {
		allowBlank: false
	},
	selModel: {
		injectCheckbox: 0,
		mode: "MULTI",  
		checkOnly: false    
	},
	selType: "checkboxmodel",
	requires: [
	   'Ext.toolbar.Paging',
	   'Ext.grid.feature.Grouping'
	],
	    
	viewConfig: {
		trackOver: false,
		stripeRows: true
	},
	    
	columns: [{
		text: '用户编码', 
		dataIndex: 'userCode',
		width: 120
	},{
		text: '用户名称', 
		dataIndex: 'userName',
		width: 180
	},{
		text: '用户帐号', 
		dataIndex: 'userAccount',
		width: 180
	},{
		text: '手机', 
		dataIndex: 'phone',
		width: 180
	},{
		text: '邮箱', 
		dataIndex: 'email',
		width: 240
	}],
	plugins: [
      Ext.create('Ext.grid.plugin.CellEditing', {
    	  clicksToEdit: 1,
    	  ptype: 'cellediting'
      })
	],
	initComponent : function() {
		var store = Ext.create('appcenter.main.core.user.store.maCrUserStore');
		this.store=store;
		this.dockedItems = [{
			xtype: 'pagingtoolbar',
			store: store,
			dock: 'bottom',
			emptyMsg: "没有数据",
			displayInfo: true
		}];
		store.load();
		this.callParent(arguments);
	}
});

四、创建视图文件
１.view\maCrUser.js文件代码如下：

Ext.define('appcenter.main.core.user.view.maCrUser',{	
	extend: "Ext.Panel",
	id: 'maCrUser',
	layout:'fit',
	requires : [
        'appcenter.main.core.user.component.maCrUserQueryTable'
	],
	items :[{
		layout:'border',
		items:[{
			region:'north',
			items:[{
				xtype : 'container',
    		 	style:'margin:15px 0 10px 0;',
    		 	layout: {
    	            type: 'table',
    	            columns: 6,
    	            tdAttrs: {style:'padding-left:10px;' }
    	        },
           		items : [{
          			xtype: 'button',
          			scale: 'medium',
           			iconCls : 'fa fa-plus',
           			name : 'add',
           		    handler: 'openData',
           		    text : '新建'
           		},{
           			xtype: 'button',
           			scale: 'medium',
           			iconCls : 'fa fa-pencil',
           			name : 'edit',
           		    handler: 'openData',
           		    text : '编辑'
           		},{
           			xtype: 'button',
           			scale: 'medium',
           			iconCls : 'fa fa-close',
           			name : 'delete',
           			handler:'openData',
           			text : '删除'
           		},{
           			xtype: 'button',
           			scale: 'medium',
           			iconCls : 'fa fa-search',
           			name : 'read',
           		    handler: 'openData',
           		    text : '查阅'
           		}]
			},{                 
            	xtype:'form',
            	layout:'form',
        	    width : '100%',
        	    id: 'maCrUserQueryForm',
        	    labelWidth : 85,
        	    fieldDefaults: {
        	        labelAlign: 'right',
        	        msgTarget: 'side'
        	    },           
        	    items:[{
        		    	 xtype:'fieldset',
        		    	 align:'center',
        		    	 collapsible:true,
        		    	 title : '查询条件',
        		    	 items:[{
                    		 layout:'column',
                    		 defaults:{
                    			 layout:'form' ,
                    			 style:{'margin-top':'5px'},
                    		 },
                        	 items:[{
                        		 xtype: "textfield",
                                 fieldLabel: '用户账号',
                                 name: 'userAccount',
                                 columnWidth:.49
                             },{
                            	 xtype: "textfield",
                                 fieldLabel: '用户名称',
                                 name: 'userName',
                                 columnWidth:.49
                             },{
                            	 columnWidth:1,
                            	 style:'padding-top:20px',
	                   	    	 tbar:['->',{  
	                   	    		  text:'查询',
	                   	    		  iconCls : 'fa fa-search-plus',
	                   	    		  handler:'queryData'
	                   	    	 },'-',{
	                   	    		  text:'重置',
	                   	    		  iconCls : 'fa fa-stop-circle-o',
	                   	    		  handler:'clearQueryData'
	                   	    	 },'->']
                     	    }]
        		    	 }]
        	    }]
            }]
		},{
			region:'center',
			xtype:'maCrUserQueryTable'
		}]
	}]
});

五、运行结果如下图：