18、Ext JS 应用开发：邮件客户端与生产准备全流程

Ext JS 应用开发：邮件客户端与生产准备全流程

1. 邮件客户端模块开发

在邮件客户端模块开发中，我们致力于实现类似 Outlook 的功能，包括邮件预览显示控制、邮件拖动排序以及新邮件撰写等功能。

1.1 邮件预览显示控制

根据用户的选择，邮件预览的显示位置会有所不同：
- 若用户选择在底部显示预览（#4），则东部容器必须隐藏，南部容器必须显示。
- 若用户选择在右侧显示预览（#5），则东部容器必须显示，南部容器必须隐藏。
- 若用户选择隐藏预览（#6），则南部和东部容器都必须隐藏。

1.2 邮件拖动排序功能实现

为了实现邮件的拖动排序功能，我们需要在 Grid 面板（邮件列表）和 Tree 面板（邮件菜单）中添加拖放功能。
- Grid 面板添加拖放功能 ：在 Packt.view.mail.MailList 类的 viewConfig 方法中添加以下代码：

plugins: {
    ptype: 'gridviewdragdrop',
    ddGroup: 'mailDD'
}

这里我们添加了 Ext JS SDK 原生的拖放插件，并为 ddGroup 命名，它代表了该插件能够交互的拖放区域。
- Tree 面板添加拖放功能 ：在 Packt.view.mail.MailMenu 类中添加以下代码：

viewConfig: {
    plugins: {
        ptype: 'treeviewdragdrop',
        ddGroup: 'mailDD',
        enableDrag: false
    }
}

我们使用了专门为 Tree 面板设计的拖放插件，只启用了放置操作，并且 ddGroup 属性与 Grid 面板相同，这意味着 Grid 面板可以与该 Tree 面板进行拖放交互。
- 控制器逻辑实现 ：我们需要监听 Tree 面板的 beforedrop 事件，并在控制器中实现相应的逻辑。

"mailMenu treeview": {
    beforedrop: this.onBeforeDrop
}

onBeforeDrop: function(node, data, overModel, dropPosition, dropHandler, options) {    
    Ext.each(data.records, function(rec){ 
        rec.set('folder',overModel.get('text')); 
    });
    dropHandler.cancelDrop();
    var grid = Ext.ComponentQuery.query('maillist')[0];
    var store = grid.getStore();
    store.sync();       
}

在 onBeforeDrop 方法中，我们遍历所有被拖动的记录，将其 folder 字段设置为目标节点的名称，然后取消放置事件，并同步 Grid 面板的存储以保存新的文件夹名称到数据库。

1.3 新邮件撰写窗口创建

新邮件撰写窗口的创建分为以下几个步骤：
- 创建窗口 ：使用 Ext.define 创建一个新的窗口类 Packt.view.mail.NewMail 。

Ext.define('Packt.view.mail.NewMail', {
    extend: 'Ext.window.Window',
    alias: 'widget.newmail',
    height: 410,
    width: 670,
    autoShow: true,
    layout: {
        type: 'fit'
    },
    title: 'Untitled - Message',
    iconCls: 'new-mail'
});

• 添加工具栏 ：在窗口的 dockedItems 中添加一个工具栏，包含发送、保存、重要性和显示抄送与密送按钮。

dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {
                xtype: 'button',
                text: 'Send',
                iconCls: 'send-mail',
                itemId: 'send'
            },
            {
                xtype: 'button',
                text: 'Save',
                iconCls: 'save'
            },
            {
                xtype: 'tbseparator'
            },
            {
                xtype: 'button',
                iconCls: 'importance'
            },
            {
                xtype: 'tbseparator'
            },
            {
                xtype: 'button',
                text: 'Show Cc & Bcc',
                iconCls: 'bcc',
                itemId: 'bcc'
            }
        ]
    }
]

• 添加表单 ：在窗口的 items 中添加一个表单，包含收件人、抄送、密送、主题、附件和邮件内容等字段。

items: [
    {
        xtype: 'form',
        frame: false,
        bodyPadding: 10,
        autoScroll: true,
        defaults: {
            anchor: '100%',
            xtype: 'textfield'
        },
        items: [
            {
                fieldLabel: 'To',
                name: 'to'
            },
            {
                fieldLabel: 'Cc',
                hidden: true,
                name: 'cc'
            },
            {
                fieldLabel: 'Bcc',
                hidden: true,
                name: 'bcc'
            },
            {
                fieldLabel: 'Subject',
                name: 'subject'
            },
            {
                xtype: 'button',
                text: 'Add...',
                iconCls: 'attach',
                itemId: 'attach'
            },
            {
                xtype: 'filefield',
                name: 'file'
            },
            {
                xtype: 'htmleditor',
                height: 168,
                style: 'background-color: white;',
                name: 'content'
            }
        ]
    }
]

• 动态显示抄送和密送字段 ：当用户点击“Show Cc & Bcc”按钮时，需要动态显示抄送和密送字段。在控制器中实现以下方法：

onShowBcc: function(button, e, options){
    Ext.ComponentQuery.query('textfield[name=cc]')[0].show();
    Ext.ComponentQuery.query('textfield[name=bcc]')[0].show();
}

• 动态添加文件上传字段 ：当用户点击“Add…”按钮时，需要动态添加新的文件上传字段。在控制器中实现以下方法：

onNewAttach: function(button, e, options){
    var form = button.up('window').down('form');
    var fileUpload = {
        xtype: 'filefield',
        name: 'file' + this.attachPosition 
    };
    form.insert(this.attachPosition++, fileUpload); 
}

同时，需要在控制器中初始化 attachPosition 为 6，并在用户关闭新邮件窗口并重新打开时将其重置为 6。

attachPosition: 6;
onNewMessage: function(button, e, options){
    Ext.create('Packt.view.mail.NewMail');
    this.attachPosition = 6;
}

2. 生产准备

在完成邮件客户端模块的开发后，我们需要为应用的生产部署做准备，包括创建自定义主题和进行生产打包。

2.1 创建自定义主题

为了创建自定义主题，我们将使用 Sencha Cmd 和操作系统的终端应用程序。
- 创建主题目录 ：打开终端，将目录更改为项目的根文件夹，然后使用以下命令创建一个新的主题：

sencha generate theme masteringextjs-theme

这个命令将在 packages 文件夹中创建一个名为 masteringextjs-theme 的新目录。
- 主题目录结构 ：主题目录包含以下几个重要的子目录：
- sass 目录 ：包含所有的 Sass 文件，其中又分为 var 、 src 和 etc 三个子目录。
- var ：包含 Sass 变量。
- src ：包含 Sass 规则和混合器，这些规则和混合器使用 sass/var 目录中声明的变量。
- etc ：包含额外的实用函数和混合器。
- resources 文件夹 ：包含图像和其他静态资源。
- overrides 文件夹 ：包含所有可能需要用于主题化组件的 JavaScript 覆盖。
- 更改基础主题 ：默认情况下，我们创建的主题将使用 ext-theme-classic 文件作为基础。为了尝试新的主题，我们可以将基础主题更改为 Ext JS 4.2 中的 Neptune 主题。打开 package.json 文件，将 extend 属性的值从 ext-theme-classic 更改为 ext-theme-neptune 。

{
    "name": "masteringextjs-theme",
    "type": "theme",
    "creator": "anonymous",
    "version": "1.0.0",
    "compatVersion": "1.0.0",
    "local": true,
    "requires": [],
    "extend": "ext-theme-neptune"
}

• 构建主题 ：在终端中，将目录更改为 packages/masteringextjs-theme ，然后运行以下命令构建主题：

sencha package build

这个命令将在 packages/masteringextjs-theme 文件夹中创建一个 build 目录，其中包含一个名为 masteringextjs-theme-all.css 的文件，该文件包含了我们为主题样式化的所有组件的样式。
- 应用主题到项目 ：打开项目根目录下的 .sencha/app/sencha.cfg 文件，将 app.theme 属性的值更改为我们刚刚创建的主题名称 masteringextjs-theme 。然后在终端中，将目录更改为应用的根文件夹，运行以下两个命令应用更改：

sencha ant clean
sencha app build

• 自定义主题样式 ：在 packages/masteringextjs-theme/sass/var 文件夹中创建一个名为 Component.scss 的新文件，并添加以下内容：

$base-color: #317040 !default;

这将把主题的基础颜色从蓝色更改为绿色。然后再次运行 sencha package build 和 sencha app build 命令应用更改。

2.2 生产打包

为了将应用部署到生产环境，我们需要进行生产打包。
- 执行生产打包命令 ：打开终端，将目录更改为应用的根目录，然后运行以下命令进行生产打包：

sencha app build

这个命令将创建一个名为 build/NameofTheApp/production 的新目录，其中包含了我们开发的所有代码和运行应用所需的 Ext JS 代码。
- 优化代码 ：Sencha Cmd 将使用 YUI Compressor 对 JavaScript 代码进行最小化和混淆处理，生成一个非常小的 all-classes.js 文件。同时，它还将评估应用使用的所有组件，并过滤掉不需要的 CSS，将其放入 resources/Packt-all.css 文件中。所有的自定义图像也将从开发环境复制到生产文件夹中。
- 修复生产环境问题 ：在测试生产环境时，我们可能会遇到一些问题。需要对 build/Packt/production/index.html 文件进行一些更改，添加翻译文件和 app.css 文件。最终的 index.html 文件如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Packt</title>
    <link rel="stylesheet" href="resources/Packt-all.css"/>
    <link rel="stylesheet" href="resources/css/app.css">
    <script src="translations/locale.js"></script>
    <script type="text/javascript" src="all-classes.js"></script>
</head>
<body></body>
</html>

通过以上步骤，我们完成了邮件客户端模块的开发和应用的生产准备工作，使应用能够在生产环境中稳定运行。

Ext JS 应用开发：邮件客户端与生产准备全流程

3. 技术点分析

3.1 拖放功能技术分析

拖放功能是邮件客户端模块中的一个重要特性，实现该功能涉及到多个组件和事件的协同工作。以下是对拖放功能的详细技术分析：
- 组件配置 ：在 Grid 面板和 Tree 面板中分别添加拖放插件，通过 ddGroup 属性确保它们能够相互交互。Grid 面板使用 gridviewdragdrop 插件，Tree 面板使用 treeviewdragdrop 插件，并且在 Tree 面板中禁用了拖动功能，只允许放置操作。

// Grid 面板配置
viewConfig: {
    plugins: {
        ptype: 'gridviewdragdrop',
        ddGroup: 'mailDD'
    }
}

// Tree 面板配置
viewConfig: {
    plugins: {
        ptype: 'treeviewdragdrop',
        ddGroup: 'mailDD',
        enableDrag: false
    }
}

• 事件处理 ：监听 Tree 面板的 beforedrop 事件，在事件处理函数中实现自定义逻辑。在 onBeforeDrop 方法中，我们遍历被拖动的记录，修改其 folder 字段，并取消默认的放置事件，最后同步 Grid 面板的存储以保存更改。

"mailMenu treeview": {
    beforedrop: this.onBeforeDrop
}

onBeforeDrop: function(node, data, overModel, dropPosition, dropHandler, options) {    
    Ext.each(data.records, function(rec){ 
        rec.set('folder',overModel.get('text')); 
    });
    dropHandler.cancelDrop();
    var grid = Ext.ComponentQuery.query('maillist')[0];
    var store = grid.getStore();
    store.sync();       
}

• 数据同步 ：通过调用 store.sync() 方法，将更改保存到数据库中，确保数据的一致性。

3.2 新邮件窗口技术分析

新邮件窗口的创建涉及到多个组件的组合和动态功能的实现。以下是对新邮件窗口的详细技术分析：
- 窗口和表单创建 ：使用 Ext.define 创建一个新的窗口类 Packt.view.mail.NewMail ，并在窗口中添加工具栏和表单。表单包含多个字段，如收件人、抄送、密送、主题、附件和邮件内容等。

Ext.define('Packt.view.mail.NewMail', {
    extend: 'Ext.window.Window',
    alias: 'widget.newmail',
    height: 410,
    width: 670,
    autoShow: true,
    layout: {
        type: 'fit'
    },
    title: 'Untitled - Message',
    iconCls: 'new-mail'
});

dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            // 工具栏按钮配置
        ]
    }
]

items: [
    {
        xtype: 'form',
        frame: false,
        bodyPadding: 10,
        autoScroll: true,
        defaults: {
            anchor: '100%',
            xtype: 'textfield'
        },
        items: [
            // 表单字段配置
        ]
    }
]

• 动态功能实现 ：通过监听按钮的点击事件，实现动态显示抄送和密送字段以及动态添加文件上传字段的功能。在控制器中实现相应的方法，使用 Ext.ComponentQuery 查找组件并调用其方法来实现动态效果。

// 动态显示抄送和密送字段
onShowBcc: function(button, e, options){
    Ext.ComponentQuery.query('textfield[name=cc]')[0].show();
    Ext.ComponentQuery.query('textfield[name=bcc]')[0].show();
}

// 动态添加文件上传字段
onNewAttach: function(button, e, options){
    var form = button.up('window').down('form');
    var fileUpload = {
        xtype: 'filefield',
        name: 'file' + this.attachPosition 
    };
    form.insert(this.attachPosition++, fileUpload); 
}

3.3 自定义主题技术分析

自定义主题的创建和应用涉及到 Sencha Cmd 和 Sass 文件的使用。以下是对自定义主题的详细技术分析：
- 主题生成 ：使用 Sencha Cmd 的 sencha generate theme 命令创建一个新的主题目录，该目录包含了主题所需的各种文件和文件夹结构。

sencha generate theme masteringextjs-theme

• 主题目录结构 ：主题目录中的 sass 目录包含了所有的 Sass 文件，其中 var 目录用于定义 Sass 变量， src 目录用于定义 Sass 规则和混合器， etc 目录包含额外的实用函数和混合器。
• 基础主题更改 ：通过修改 package.json 文件中的 extend 属性，将基础主题从 ext-theme-classic 更改为 ext-theme-neptune 。

{
    "name": "masteringextjs-theme",
    "type": "theme",
    "creator": "anonymous",
    "version": "1.0.0",
    "compatVersion": "1.0.0",
    "local": true,
    "requires": [],
    "extend": "ext-theme-neptune"
}

• 主题构建和应用 ：使用 sencha package build 命令构建主题，生成包含所有样式的 CSS 文件。然后通过修改 sencha.cfg 文件中的 app.theme 属性，将主题应用到项目中，并使用 sencha ant clean 和 sencha app build 命令应用更改。

sencha package build
sencha ant clean
sencha app build

• 主题样式自定义 ：在 sass/var 目录中创建新的 Sass 文件，定义自定义的变量和样式，然后重新构建主题以应用更改。

$base-color: #317040 !default;

4. 流程总结

4.1 邮件客户端开发流程

邮件客户端的开发流程可以总结为以下几个步骤：
1. 需求分析 ：明确邮件客户端的功能需求，如邮件预览显示控制、邮件拖动排序、新邮件撰写等。
2. 模块设计 ：设计邮件客户端的各个模块，包括 Grid 面板、Tree 面板、新邮件窗口等。
3. 代码实现 ：根据设计方案，使用 Ext JS 框架实现各个模块的功能。
- 在 Grid 面板和 Tree 面板中添加拖放功能。
- 创建新邮件窗口，并实现动态显示和添加字段的功能。
4. 测试和调试 ：对邮件客户端进行测试，确保各个功能正常工作，并修复发现的问题。

4.2 生产准备流程

生产准备流程可以总结为以下几个步骤：
1. 自定义主题创建 ：使用 Sencha Cmd 创建自定义主题，并进行样式定制。
- 生成主题目录。
- 更改基础主题。
- 构建和应用主题。
2. 生产打包 ：使用 Sencha Cmd 对应用进行生产打包，优化代码并修复生产环境问题。
- 执行生产打包命令。
- 优化 JavaScript 和 CSS 代码。
- 复制自定义图像到生产文件夹。
- 修复 index.html 文件。

5. 总结

通过以上的开发和生产准备工作，我们成功实现了一个功能丰富的邮件客户端应用，并为其在生产环境中的部署做好了准备。在开发过程中，我们充分利用了 Ext JS 框架的强大功能，实现了拖放、动态显示和添加字段等复杂功能。同时，通过使用 Sencha Cmd，我们能够方便地创建自定义主题和进行生产打包，提高了开发效率和应用性能。

在未来的开发中，我们可以进一步扩展邮件客户端的功能，如添加邮件搜索、邮件分类等功能，以满足用户的更多需求。同时，我们也可以继续优化应用的性能和用户体验，提高应用的稳定性和可靠性。

流程图

graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px;

    A([开始]):::startend --> B(邮件客户端开发):::process
    B --> B1(需求分析):::process
    B --> B2(模块设计):::process
    B --> B3(代码实现):::process
    B3 --> B31(添加拖放功能):::process
    B3 --> B32(创建新邮件窗口):::process
    B --> B4(测试和调试):::process
    B4 --> C(生产准备):::process
    C --> C1(自定义主题创建):::process
    C1 --> C11(生成主题目录):::process
    C1 --> C12(更改基础主题):::process
    C1 --> C13(构建和应用主题):::process
    C --> C2(生产打包):::process
    C2 --> C21(执行生产打包命令):::process
    C2 --> C22(优化代码):::process
    C2 --> C23(复制自定义图像):::process
    C2 --> C24(修复 index.html 文件):::process
    C2 --> D([结束]):::startend

表格

步骤	邮件客户端开发	生产准备
1	需求分析	自定义主题创建
2	模块设计	生成主题目录
3	代码实现	更改基础主题
4	测试和调试	构建和应用主题
5	-	生产打包
6	-	执行生产打包命令
7	-	优化代码
8	-	复制自定义图像
9	-	修复 index.html 文件