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

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

二、Extjs创建模型文件
１.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' }]
});

二、Extjs创建数据文件
１.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);}
});

四、Extjs创建视图文件
１.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'}]}]
});

五、Extjs运行结果如下图：