Ext JS 6：Visual Studio Code、创建包和权限管理

在《Ext JS 6.2实战》一书中，创建了几个常用的工具类，如果要将这些工具类应用到别的项目，使用书中的方法只能将类复制到新项目，然后修改类名来实现。那么，是否有更好的方式呢？在查看了官方文档《Creating Sencha Cmd Packages[http://docs.sencha.com/cmd/guides/cmd_packages/cmd_creating_packages.html]》之后，有了新方法，就是创建一个公共包，本文将演示如何来创建这个公共包。

由于实战一书的权限比较简单，没有考虑到大家对权限需求，因而在本文一并处理，来实现复杂一点的权限。

在开始之前，先创建一个名为PackageTest的文件夹，然后用Visual Studio Code（以下简称code）打开该文件夹。在code中按CTRL+`打开集成终端，在终端中输入以下命令创建一个使用经典工具包的应用程序：

PS D:\Workspace\PackageTest> sencha -sdk D:\Workspace\ext6\ gen app --classic PackageTest ./

项目创建后，在项目根目录创建一个名为.vscode的文件夹，然后在文件夹下新建一个名为iisexpress.json的文件，并添加代码如下：

{
    "port":5000
}

以上代码主要用来指定IIS Express的访问端口。代码保存后，在code中按下CTRL+SHIFT+P打开下图所示的命令面板，并在里面输入或选择IIS Express: Restart Website或者IIS Express: Start Website就可在浏览器打开应用程序了。

调试环境设置好以后，执行以下命令创建一个名为Common的包：

sencha gen package -ty CODE Common

命令中的ty参数用于指定包的的类型，主要的类型包括以下几个：

• CODE ： 代码库
• EXTENSION : 应用于Sencha Cmd的扩展
• FRAMEWORK : 框架
• THEME : 主题
• TEMPLATE : 模版
• TOOLKIT : 组件或部件库
• LOCALE : 本地化包
• OTHER : 其他类型

在这里，公共包只包含一些功能上的代码，因而在这里选择了代码库类型。

命令执行后，会在Package文件夹下看到下图所示的文件夹：

从文件夹的结构可以看到，它的结构与通用应用程序的结构是一样的，也就是说，它的开发模式和开发通用应用程序的方式是一样的，应用于经典模式的类要放在classic文件夹的src文件夹下，应用于现代模式的类要放在modern文件夹的src文件夹下，而共用的类则方在src文件夹下。

下面来创建权限管理类，在Common\src文件夹下新建一个名为util的文件，并添加一个名AccessControl.js的文件。在文件中主要定义一个属性和三个方法，具体代码如下：

Ext.define('Common.util.AccessControl',{
    alternateClassName: 'ACL',
    singleton: true,

    permission: {},

    constructor: function (config) {
        this.initConfig(config);
        this.callParent(arguments);
    },

    setPermission: function(data){
        if(Ext.isObject(data)){
            Ext.apply(this.permission,data);
        }else{
            Ext.raise('权限数据不符合要求');
        }
    },

    getPermission:function(key){
        if(Ext.isEmpty(key)) return null;
        return this.permission[key];
    },

    checkPermission: function(key){
        if(Ext.isEmpty(key)) return false;
        return this.permission[key] == true;
    }

});

代码中，属性permission用来记录后台返回的权限信息，预想的权限返回结果类似于以下格式：

{
    createView1: true,
    updateView1: true,
    deleteView1: false,
    createView2: false,
    updateView2: true,
    deleteView2: false
}

方法setPermission用于将权限复制到属性permission。方法getPermission用于返回权限。方法checkPermission用于检查用户是否具有该权限，只有值为true时，用户才具有该权限。

现在，已经有了一个公共类了，要使用它，先在app.json中添加对它的引用，和引用本地化包、字体包是一样的，在requires配置项中添加引用。在创建包的时候已经添加了对它的引用，因而这里就不需要去设置了。

如果想图方便，不想在每个使用到该类的时候都写一次引用，可以在app.js的requires中添加以下代码来引用公共类：

'Common.util.*'

下面要定义两个视图用来测试权限功能，先在app\view文件夹下创建一个名为view1的文件夹，并添加以下两个文件。
Main.js：

Ext.define('PackageTest.view.view1.Main',{
    extend:"Ext.panel.Panel",
    xtype: 'view1',
    viewModel: 'view1',    

    tbar:[
        { iconCls: 'x-fa fa-file-o', bind:{ hidden: '{!create}' } },
        { iconCls: 'x-fa fa-pencil', bind:{ hidden: '{!update}' } },
        { iconCls: 'x-fa fa-trash', bind:{ hidden: '{!delete}' } }
    ]

})

代码主要定义了3个按钮，绑定了数据模型的create、update和delete对象。要注意的是，拥有该权限的返回的是true，不能隐藏，因而这里要取反。

MainModel.js

Ext.define('PackageTest.view.view1.MainModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.view1',

    data: {
    },

    formulas: {
        create: function (get) {
            return ACL.checkPermission('createView1');
        },
        update: function (get) {
            return ACL.checkPermission('updateView1');
        },
        delete: function (get) {
            return ACL.checkPermission('deleteView1');
        }
    }
});

代码主要在formulas中定义了视图绑定所需的create、update和delete对象，在对象中，对调用了checkPermission方法。要注意的是，传递给checkPermission方法的权限名称必须对应服务器返回的权限名称。

使用同样方式，创建视图view2。视图创建完成后，打开主视图，将Home的视图修改为view1，User的视图修改为view2，代码如下：

   items: [{
        title: 'Home',
        iconCls: 'fa-home',
        // The following grid shares a store with the classic version's grid as well!
        items: [{
            xtype: 'view1'
        }]
    }, {
        title: 'Users',
        iconCls: 'fa-user',
        items: [{
            xtype: 'view2'
        }]

    }, {
    ……

记得在主视图中添加对view1和view2的引用。

在主视图中，添加主视图渲染的监听，代码如下：

    listeners:{
        render: 'onMainRender'
    }

在主视图的控制器中，添加onMainRender方法，代码如下：

    onMainRender: function(){
        ACL.setPermission({
            createView1: true,
            updateView1: true,
            deleteView1: false,
            createView2: false,
            updateView2: true,
            deleteView2: false
                });
    }

在这里，假定了我们在onMainRender方法内通过Ajax返回了用户的权限信息，并调用setPermission方法设置了权限。

好了，现在在终端中，输入sencha app refresh更新app.json文件，以加载新添加的类。如果修改了样式了，需要使用sencha app build来更新样式文件。

在浏览器中属性应用程序，就可看到在view1视图内，添加和编辑按钮是可见的，因为用户拥有该权限。而在view2视图内，只有编辑按钮是可见。这说明权限控制已经生效了。

源代码地址：https://gitee.com/tianxiaode/PackageTest/blob/master/Readme.md