ExtJS插件开发

代码部署

开源版项目（支持PC以及APP开发）： jepaas-project-frontend

1. 仓库地址

PC端插件项目： p-suanbanyun（je-paas-frontend-plugin）

1. 用vscode打开插件项目，在终端运行 cnpm i 下载所有package.json配置中的依赖包：

   npm i 或者 cnpm i

2. 当所有依赖安装完成，运行本地调试启动命令：

   npm run dev

3. 当插件开发完成，需升级到线上，则启动build命令：

   npm run build

4. build后的文件会输出在根目录dist文件下，pro目录是插件的view[hash].js文件，static文件夹是所有引用的资源文件，需要把dist文件下的东西全部放到后台部署的webapps>webRoot下（覆盖），后台升级就OK了；

开发标准

ExtJS插件开发采用MVC的设计模式开发，具体目录结构参考

jepaas-project-frontend/src/pc/ext:
└── demo               // 模块名
     ├── controller    // 控制器目录
     ├── view          // 视图目录
     └── store         // 数据目录，也可以直接写到view里

代码示例

创建示例目录

jepaas-project-frontend/src/pc/ext:
└── demo                      // 模块名
     ├── controller           // 控制器目录
     |       └── MainController.js   // 控制器
     └── view                 // 视图目录
          ├── GridView.js     // 列表Demo文件
          └── FormView.js     // 表单Demo文件

案例1

自定义版面，挂接到列表，根据列表刷新，触发自定义页面相关事件

1. 创建列表demo文件GridView.js

/**
 * 自定义功能的视图
 */
Ext.define("PRO.demo.view.GridView", {
  extend: 'Ext.panel.Panel',
  alias: 'widget.demo.gridview',
  layout: 'fit',
  initComponent: function () {
    var me = this;
    me.store = Ext.create('Ext.data.Store', { fields: ['html'], data: [] })
    //数据视图
    me.items = [{
      xtype: 'dataview',
      itemId: 'view',
      store: me.store,
      autoScroll: true,
      itemSelector: 'div.demo-list-item-wrap',
      emptyText: '<div style="padding:20px;text-align:center;color:#444;font-size:20px;">没有数据</div>',
      tpl: [
        '<tpl for=".">',
        '<div class="demo-list-item-wrap" style="padding:10px;">',
          '{html}',
        '</div>',
        '</tpl>'
      ]
    }];
    //功能按钮
    me.tbar = {
      cls: 'je-button-bar',
      items: [{
        text: '获取选中的数据',
        handler: function (btn) {
          //主功能列表
          var grid = me.mainGrid;
          //获取选中的数据
          var sels = grid.getSelectionModel().getSelection();
          if (JE.isEmpty(sels)) {
            JE.alert('请选择数据！');
          } else {
            JE.alert('选中了'+sels.length+'条数据!');
          }
        }
      }]
    };
    me.callParent(arguments);
  },
  /**
   * 加载数据
   * @param {jegridview} grid 主功能列表
   */
  loadData:function(grid){
    var me = this,data = [];
    //循环列表数据
    grid.store.each(function(rec){
      var html = [];
      //读取列表的数据，进行展示
      Ext.each(Object.keys(rec.data),function(key,i){
        html.push(key+'：'+rec.get(key));
        if(i>3)return;
      })
      data.push({html:html.join(',')});
    })
    me.store.loadData(data);
  }
});

2. 将自定义插件挂接到MainController中

/**
 * 自定义功能主控制器
 */
Ext.define("PRO.demo.controller.MainController", {
  extend: 'Ext.app.Controller',
  init: function () {

    var self = this;
    var ctr = {}
    self.control({ctr});
  },
  views: [
    //加载引用的面板
    'PRO.demo.view.GridView', //列表
  ]
});

3. 将MainController挂载到功能

4. 注册列表afterrender事件，将列表自定义插件挂载到列表上

代码如下：

function(self){
    var grid = self;
    //创建组件
    var demoGrid = Ext.create('PRO.demo.view.GridView',{region:'south',height:400,mainGrid:grid});
    //加载到列表的父容器下方，父容器布局是border
    grid.demoGrid = grid.ownerCt.add(demoGrid);
}

5. 注册列表的load事件，列表加载完数据后，可以操作自定义列表插件

代码如下：

function(store,records){
    var grid = store.gridObj
    //执行demo插件的方法
    grid.demoGrid.loadData(grid);
}

6. 插件页面展示效果

案例2

自定义编码，挂接到表单，根据表单赋值，同时赋值给当前自定义页面组件值

1. 创建demo文件FormView.js

/**
 * 自定义功能的视图
 */
Ext.define("PRO.demo.view.FormView", {
  extend: 'Ext.form.Panel',
  alias: 'widget.demo.formview',
  layout: 'column',
  initComponent: function () {
    var me = this;
    me.defaults = {
      labelAlign:'right',
      margin:3,
      xtype:'textfield',
      columnWidth:.25
    };
    me.items = [{
      fieldLabel:'自定义字段1',
      name:'DEMO_FIELD1'
    }, {
      fieldLabel: '自定义字段2',
      name: 'DEMO_FIELD2'
    }, {
      fieldLabel: '自定义字段3',
      name: 'DEMO_FIELD3'
    }, {
      fieldLabel: '自定义字段4',
      name: 'DEMO_FIELD4'
    }]
    me.callParent(arguments);
  },
  /**
   * 加载数据
   * @param {jeformview} form 主功能表单
   * @param {Object} values 主功能表单数据
   */
  loadData: function (form,values) {
    var me = this, data = {};
    Ext.each(Object.keys(values),function(key,i){
      data['DEMO_FIELD'+(i+1)] = values[key];
      //只处理前四个字段
      if(i==3)return;
    })
    me.form.setvalues(data);
  }
});

2. 将自定义插件挂接到MainController中

/**
 * 自定义功能主控制器
 */
Ext.define("PRO.demo.controller.MainController", {
  extend: 'Ext.app.Controller',
  init: function () {

    var self = this;
    var ctr = {}
    self.control({ctr});
  },
  views: [
    //加载引用的面板
    'PRO.demo.view.GridView', //列表
    'PRO.demo.view.FormView', //表单
  ]
});

3. 将MainController挂载到功能

4. 注册表单afterrender事件，将表单自定义插件挂载到表单上

代码如下：

function(self){
    var form = self;
    //创建demo组件
    var demoForm = Ext.create('PRO.demo.view.FormView',{columnWidth:1,mainForm:form});
    //将组件加入到表单
    form.demoForm = form.getFormBox().add(demoForm)
}

5. 注册表单的setvalues自定义事件，表单赋值后，可以操作自定义列表插件

代码如下：

function(form,values){
    //执行demo插件的方法
    form.demoForm.loadData(form,values);
}

6. 插件页面展示效果