Cmd 深入入门

本指南涵盖深入了解 Sencha Cmd 可以做什么。

在本指南中，我们将从头开始使用 Sencha Cmd 和 Ext JS Modern Toolkit 构建 Ext JS 7.0 应用程序，该工具包专为移动设备和现代桌面浏览器（如 Chrome、Firefox、Edge、Safari 和 IE11）而设计。要以旧版本的 IE 浏览器为目标，请参阅下面标题为 Classic Toolkit（经典工具包） 的部分。

从最小的应用程序（Sencha Cmd 生成）开始，我们将按照 Sencha 推荐的最佳实践逐步向此应用程序添加功能。虽然可以将 Ext JS 用作预构建的 JavaScript 和 CSS 文件，但您的真实世界应用程序将通过从可扩展的工具基础开始而大大受益，这些工具可以为您的最终用户生成优化的构建。

让我们开始吧！

先决条件

1. 下载并安装 Sencha Cmd 7.0.0
2. 下载 Ext JS 7.0.0 SDK

我们建议将 Ext JS 解压到“home”目录中的固定位置

C:\Users\Me\sencha-sdks    # Windows
/Users/Me/sencha-sdks      # Mac OS X
/home/me/sencha-sdks       # Linux

在此文件夹中解压缩 Ext JS 后，您应该看到一个子文件夹，例如以下文件夹（在 Windows 上）

C:\Users\Myname\sencha-sdks\ext-7.0.0

现在 Sencha Cmd 已安装并且 Ext JS SDK 已解压缩，让我们使用此位置配置 Sencha Cmd。例如（在 Windows 上）

> sencha config --prop sencha.sdk.path=C:\Users\Me\sencha-sdks --save

保存此设置后，您可以将更高版本的 Ext JS 下载到同一文件夹中，而无需重复最后一步。

初始化应用程序

要创建应用程序，请打开终端或命令提示符，并创建一个空目录并“cd”进入该目录

> md ~/myapp    # On Windows, replace "~" with "C:\Users\Me"
> cd ~/myapp

从此目录中，我们运行“sencha app init”以在磁盘上创建应用程序

> sencha app init [email protected] --modern MyApp

这将生成几行输出，因为应用程序代码已生成，并且 Ext JS 的必要部分已复制到当前目录中。当前目录现在应包含

ext700/
.gitignore
app.js
app.json
build.xml
index.html
workspace.json

启动应用程序

要构建应用程序（以允许浏览器加载它），请从同一目录运行以下命令

> sencha app watch

您将看到几行信息，因为 Sencha Cmd 构建了应用程序，但有两点需要注意

...
[INF] Application available at https://127.0.0.1:1841
…
[INF] Waiting for changes...

当 app watch 运行时，一个基本的 Web 服务器正在为应用程序目录提供服务。现在我们可以在浏览器中加载 https://127.0.0.1:1841 并查看应用程序。

Sencha Cmd 还在监视您的应用程序目录中的更改。如果您对样式或 JavaScript 代码进行更改，Sencha Cmd 将检测到这些更改并更新必要的构建输出，以保持应用程序在浏览器中正确呈现。当检测到您的更改时，Sencha Cmd 将记录几行输出，并且（通常在几秒钟内）以“Waiting for changes…（等待更改…）”结束，以让您知道一切都已准备就绪。

这意味着要更改您的应用程序，您可以在 IDE 或文本编辑器中编辑代码并点击保存...然后在浏览器中只需重新加载。

您可以通过按 CTRL+C 来停止 app watch。

修改应用程序

我们刚刚创建的应用程序非常小巧：它只显示一个消息框！即便如此，查看生成的代码也很有帮助。如果您查看“index.html”，您将看不到任何可视的 HTML 内容。这是因为 Ext JS 是一个“JavaScript 优先”的框架。也就是说，用户界面及其逻辑都在 JavaScript 中定义。必要的样式由各种包含的主题（例如 Material）提供。

虽然直接编写 HTML 不是必需的，但您当然可以将 Ext JS 添加到现有页面并在手写的 HTML 文档中创建组件。由于创建 Ext JS 中的应用程序不是必需的，因此本指南将不再进一步探讨这种方法。

Ext JS 是一个基于类的面向对象的框架。Ext JS 提供了数百个类，您可以用来创建或扩展您的应用程序。这些类的范围从管理数据和服务器通信的非可视类到提供强大功能的用户界面组件。通过基于这些组件创建您自己的类，您可以专注于制作引人注目的应用程序。

Ext JS 应用程序的起点是 app.js（如 app.json 中指定的）。生成的 app.js 文件看起来像这样

Ext.application({
    name: 'MyApp',

    requires: [
        'Ext.MessageBox'
    ],

    launch: function () {
        Ext.Msg.alert('Hello Ext JS', 'Hello! Welcome to Ext JS.');
    }
});

Ext.application 方法告知 Ext JS 您的应用程序。在这种情况下，这只是一个名称和一个 launch 方法。我们还在应用程序中使用“requires”描述了我们正在使用的类。

加载所需的类并且浏览器准备就绪后，将调用 launch 方法。这是应用程序执行其启动序列的地方。为了开始工作，让我们定义一个应用程序类和我们的主视图。

Application 类

默认情况下，Ext.application() 方法创建一个基本的 application 实例，但大多数应用程序都需要自定义此实例并提供自己的顶级逻辑。例如，应用程序通常需要处理诸如深度链接和浏览器的前进和后退按钮（通常称为“路由”）之类的事情。虽然本指南不会解决这些问题，但拥有一个 Application 类是最佳实践，因此让我们创建一个最基本的版本

./app/Application.js

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',

    mainView: 'MyApp.view.main.Main'
});

此应用程序在启动时不需要特殊逻辑，因此我们将 launch 方法替换为 mainView 配置属性。继承的 launch 方法将创建此类的实例。

旁注：Config（配置）属性是由 Ext JS 类声明的特殊属性，类似于 HTML 元素的属性（例如“disabled（禁用）”或“value（值）”）。这些 config（配置）属性（或简称为“configs（配置）”）可以在类主体（如上所示）上指定，也可以在“config object（配置对象）”（它是构造函数的单个参数）中传递。

现在我们有了一个 Application 类，应该更改 app.js 以匹配

Ext.application({
    name: 'MyApp',
    extend: 'MyApp.Application',  // <<== added

    requires: [
        'MyApp.*'   // tell Cmd to include all app classes
    ]
});

主视图

我们为主视图选择的类名是“MyApp.view.main.Main”，因此按照惯例，我们将创建 JavaScript 文件 './app/view/main/Main.js'。“app”文件夹是 Sencha Cmd 查找应用程序类的地方（由 app.json 配置）。视图放置在“app/view”中。“main”目录的原因将在我们向视图添加控制器和样式时变得清晰，因为这些文件也将放置在此目录中。

许多应用程序的常见主视图是选项卡面板，因此让我们首先为此主视图扩展此类

./app/view/main/Main.js

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',

    requires: [
        'Ext.Button'
    ],

    items: [{
        title: 'Home',
        html: '<h1 class="main-banner">Hello World!</h1>',
        items: [{
            xtype: 'button',
            text: 'Go'
        }]
    }, {
        title: 'Notifications'
    }, {
        title: 'Settings'
    }]
});

选项卡面板是一个特殊的 container（容器）。容器只是一个包含其他组件的组件。这些子组件（通常称为“items（项）”）通过分配“items”配置添加到容器中。在上面，选项卡面板扩展了基本容器类，并添加了一个选项卡栏，以使用户能够在子项之间切换。

添加控制器

我们已向 Home 选项卡添加了一些内容：一些 HTML 和一个按钮组件。这也是我们为 Ext.Button 类添加“requires”的原因。这允许我们在 Home 选项卡的项中使用其“xtype”。“xtype”是一个组件别名，很像 HTML 元素的标签名称。

但是，此按钮相当惰性。单击不会执行任何操作，只会涟漪按钮。要添加逻辑，我们需要一个处理程序方法。使用 Ext JS，我们可以直接在视图中编写此处理程序，但这不被鼓励。相反，我们将此代码放在控制器中。

./app/view/main/MainController.js

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    requires: [
        'Ext.MessageBox'
    ],

    onGo: function () {
        Ext.Msg.alert('Go', 'From main view controller');
    }
});

此类扩展了 ViewController，因此是适合控制视图的控制器。我们还为其分配了别名“controller.main”。此别名允许我们轻松地将控制器与我们的主视图关联起来

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',

    controller: 'main',   // <<== added
    ...

现在我们可以将 Go 按钮定向到控制器中的 onGo handler（处理程序）

    ...
    items: [{
        xtype: 'button',
        text: 'Go',
        handler: 'onGo'  // <<== added
    }]

这非常类似于将 onclick 属性添加到按钮 HTML 元素的方式。在这种情况下，该方法使用提供的名称并向上查找（从按钮开始）以查找控制器。

使用数据绑定

在许多应用程序中，大部分代码都与响应更改并将这些更改反映在适当的组件中有关。例如，如果某个输入字段为空，则禁用按钮。

Ext JS 应用程序可以使用“data binding（数据绑定）”来自动化这些常见任务。数据绑定允许应用程序在称为 view models（视图模型） 的对象中管理状态数据，然后轻松地将这些数据连接到组件配置属性。

让我们添加一个 textfield（文本字段） 组件和一个 viewModel（视图模型），并使用 bind（绑定） 配置来保持我们的组件同步

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    controller: 'main',

    requires: [
        'Ext.Button',
        'Ext.field.Text'  // <<== added
    ],

    viewModel: {   // <<== added
        data: {
            userName: ''
        }
    },

    items: [{
        title: 'Home',
        html: '<h1 class="main-banner">Hello World!<h1>',
        items: [{
            xtype: 'textfield',  // <<== added
            label: 'User name',
            bind: '{userName}'
        }, {
            xtype: 'button',
            handler: 'onGo',
            bind: {             // <<== added
                disabled: '{!userName}',
                text: '{userName ? "Save: " + userName : "Save"}'
            }
        }]
    }, {
        title: 'Notifications'
    }, {
        title: 'Settings'
    }]
});

这里发生了一些事情，所以让我们逐步分解

我们使用了 viewModel 配置来定义视图模型，并在其数据对象中添加了“userName”字符串。此视图模型的数据现在可用于主视图中包含的所有组件。

“textfield（文本字段）”组件包装了一个 HTML input 元素，并允许用户输入文本。此组件配置了 bind 配置，该配置将其值绑定到视图模型中的 userName 属性。用户所做的更改将自动反映在视图模型数据中。同样，如果视图模型数据发生更改，则此文本字段的值将更新。这称为双向数据绑定。

当 bind 配置的值是一个字符串（如我们的文本字段）时，该字符串被理解为默认配置属性的绑定表达式。对于文本字段，它是“value（值）”配置。但是，当 bind 配置被赋予一个对象值（如我们的按钮）时，此对象的键/值对是配置的名称及其相应的绑定表达式。对于我们的按钮，我们绑定了“disabled（禁用）”和“text（文本）”配置。

字符串 '{!userName}' 中的绑定表达式包含一个替换标记（在“{}”对内），该标记的计算方式与您在 JavaScript 中期望的方式相同。如果视图模型中的 userName 值为空，则按钮将被禁用。text 属性的绑定表达式说明了一个更灵活的绑定表达式。

如果您使用这些更改运行应用程序，您将看到按钮的文本和禁用状态如何跟踪文本字段中键入的任何内容。无需显式逻辑来保持这些部分同步。

视图模型具有更多功能，可以减少您原本必须编写的代码的混乱程度。有关更多信息，请参阅 ViewModels and Data Binding Guide（视图模型和数据绑定指南）。

处理事件

虽然数据绑定可以处理许多常见情况，但应用程序需要显式处理某些用户交互。与 HTML 元素一样，Ext JS 组件也会触发事件。与之前显示的按钮处理程序类似，事件处理程序通常附加到组件并由控制器提供。事件处理程序使用“listeners（监听器）”附加到组件

items: [{
    xtype: 'textfield',
    label: 'User name',
    bind: '{userName}',

    listeners: {   // <<== added
        action: 'onGo'
    }

action（操作） 事件是用户按下 ENTER 键时文本字段触发的事件。我们将此事件定向到与按钮的处理程序相同的控制器方法。虽然这种处理程序的共享很方便，但重要的是要注意，并非总是适合这样做。

如果控制器方法需要处理其参数，则方法共享通常是不合适的。到目前为止，控制器尚未使用其参数，因此像这样共享方法没有问题。但是，如果 onGo 方法需要 按钮传递的参数，那么将其附加到文本字段的 action 事件将导致问题，因为它提供了不同的 参数。

使用 Grid（网格）

虽然 Ext JS 提供了各种有用的组件，例如按钮，但它以其众多的“超级”组件而闻名。其中最受欢迎的是 Ext JS Grid。Grid 是一种显示表格数据的简单方法，并允许您的用户轻松地与该数据进行交互和操作。让我们创建一个新视图并为“通知”选项卡添加一个 grid

    }, {
        title: 'Notifications',
        xtype: 'notifications'  // <<== add to main view
    }, {

创建新视图

./app/view/notify/Notifications.js

Ext.define('MyApp.view.notify.Notifications', {
    extend: 'Ext.Panel',
    xtype: 'notifications', // #1

    requires: [
        'Ext.grid.Grid',
        'Ext.grid.column.Date',
        'Ext.layout.Fit'
    ],

    layout: 'fit', // #2

    items: [{
        xtype: 'grid',

        store: {
            type: 'notifications' // we'll define this next
        },

        columns: [{
            xtype: 'datecolumn',
            text: 'Date',
            dataIndex: 'date'
        }, {
            text: 'Description',
            dataIndex: 'description',
            flex: 1
        }]
    }]
});

此视图有几个新的部分需要考虑。

首先是在 Ext.define() 调用中提供的“xtype”，它将“notifications”设置为此视图的组件别名（或“xtype”）。这允许主视图在其 items 中使用“xtype”并创建相应类的实例。

其次，我们的视图扩展了 Ext.Panel（一种容器类型），并包含我们的 grid 作为其唯一的子项。我们使用继承的 "layout" 配置来调整大小和定位我们的子 grid。在本例中，我们使用 "fit" 布局。fit 布局将使用单个子项填充容器。

这就引出了 grid。显示 grid 所需的两个主要配置是它应显示的 "columns" 和保存其记录的数据 "store"。

columns 数组包含一个或多个 column 组件。Columns 通常具有 "text" 配置，指示要在列标题中显示的内容，以及 "dataIndex" 配置，指示应在单元格中显示的记录中的字段。除了这些之外，"width" 配置可用于为列指定特定的宽度，或者可以分配 "flex" 配置以根据 grid 的宽度按比例调整列的大小。

数据模型和 Store

管理数据是大多数应用程序的核心方面，Ext JS 提供了强大的数据包来简化此任务。在 Ext JS 应用程序中，数据建模在两个主要类中提供：Ext.data.Model 和 Ext.data.Store。

“model”是一个类，它描述了应用程序中使用的某种类型的信息的字段和行为。这在其他框架中有时称为“实体”。model 类的实例称为“记录”。记录具有一个“data”对象，其中包含其字段的值。让我们看看一个通知 model 可能是什么样子

./app/model/Notification.js

Ext.define('MyApp.model.Notification', {
    extend: 'Ext.data.Model',

    fields: [{
        name: 'date',
        type: 'date'
    }]
});

所有 model 最终都扩展了 Ext.data.Model，并且大多数都定义了一个或多个“fields”。此处使用了推荐的 model 命名约定。我们使用“model”而不是“view”。

我们已将“date”声明为 date 字段。这确保此字段的值变为 Date 对象。“description”字段（grid 使用）未声明，因此它将以服务器提供的任何形式存储在记录的 data 对象中。声明 model fields 对于了解记录中存在哪些数据很有用，但对于类型转换和验证也很有帮助。

现在我们有了一个 model，我们可以定义一个 store 来保存此类型的记录

./app/store/Notifications.js

Ext.define('MyApp.store.Notifications', {
    extend: 'Ext.data.Store',
    alias: 'store.notifications',

    model: 'MyApp.model.Notification',

    data: [
        {
            date: '2017-05-20T10:20:30Z',
            description: 'The first notification'
        }
    ]
});

“store.notifications”的别名允许 grid 使用此类型的 store

store: {
    type: 'notifications'
}

为了本例的简单起见，我们在 store 中定义了内联数据。在实际应用程序中，model 和 store 类都将定义将此数据传输到服务器和从服务器传输的方式。这是使用 proxy 完成的。Ext JS 提供的 proxy 类允许您轻松连接到提供 JSON、REST、XML 或其他数据形式的服务器。

主题和样式

到目前为止，我们已经了解了 Ext JS 应用程序的结构和功能方面。虽然这些是必不可少的，但应用程序还必须具有出色的美观性，并且 Ext JS 提供了多个主题，使您的应用程序能够出色地启动。应用程序的主题在 app.json 中指定，它具有以下默认值

"theme": "theme-material"

“theme”属性的值是主题包的名称。Ext JS modern toolkit 提供了四个标准主题供您选择

• theme-material（默认主题，基于 Google 的 Material Design）
• theme-ios（适用于 iOS 设备）
• theme-triton（一个干净、扁平的主题，适合桌面应用程序）
• theme-neptune（theme-triton 的轻微变体）

应用程序可以使用这些主题，设置 主题变量 或使用扩展默认主题之一的自定义主题包。Ext JS 定义了许多全局主题变量，组件添加了其他主题变量来控制其外观。要设置这些变量，我们需要向应用程序添加样式代码。

当 Sencha Cmd 编译应用程序中的 JavaScript 类时，它还包括您与这些类关联的任何样式。由于主题是应用程序范围的，因此此代码最好与 Application 类关联

./app/Application.scss

$base-color: #87BD3E;

$base-color 主题变量可能是主题中最重要的变量，因为它定义了大多数颜色的起点。强烈建议将样式代码放在与它们应用的视图位于同一目录中的 .scss 文件中。例如，要为主视图编写样式，请将所需的样式添加到“./app/view/main/Main.scss”。

样式化应用程序视图

为了解决管理 CSS 的挑战，即使在适度大小的应用程序中，CSS 也可能很快成为问题，Ext JS 应用程序应将特定于视图的样式放在与其视图相同的目录中的文件中。例如，要样式化我们添加到 h1 标签的“main-banner”类，我们将创建此文件

./app/view/main/Main.scss

.main-banner {
    font-style: italic;
}

请注意“main-”前缀。使用视图的名称有助于确保这些规则不会意外地应用于其他视图。在某些情况下，可以通过使用 cls 配置将其拆分为两个级别

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.tab.Panel',
    controller: 'main',

    cls: 'main',   // <<== added

    ...
    items: [{
        title: 'Home',
        cls: 'home',   // <<== added
        html: '<h1 class="banner">Hello World!<h1>',  // <<== changed

现在我们可以使用“main”和“home”类，并编写嵌套规则以将样式范围限定为正确的视图

./app/view/main/Main.scss

.main {
    .home {
        h1.banner {
            font-style: italic;
        }
    }
}

嵌套通常更易于编写和理解，但可能会导致不希望的匹配。这是因为上面的嵌套规则将在输出 CSS 中变为这样

.main .home h1.banner {
    font-style: italic;
}

这会将主视图的样式应用于 home 选项卡中的所有“h1.banner”元素，即使它们属于其他后代视图。通常不建议在同一视图中混合嵌套和前缀。

要了解有关主题和样式的更多信息，请参阅 主题指南。

Classic Toolkit

如果您的应用程序需要浏览器支持或 classic toolkit 独有的一些功能，您可以改为生成 classic 应用程序

> sencha app init [email protected] --classic MyApp

虽然存在一些 API 差异，但之前讨论的所有概念都适用于这两个 toolkit。所需的大部分更改将是类名。例如，Ext.grid.Grid 是 modern toolkit 中的 grid 组件，而 Ext.grid.Panel 是 classic toolkit 中的类名。

通用应用程序

如果您需要用于桌面的 classic toolkit，但需要用于移动设备的 modern toolkit，则可以创建通用应用程序。

> sencha app init [email protected] --universal MyApp

通用应用程序的主要区别在于使用构建配置文件为不同的目标平台创建不同的 JavaScript 和 CSS 包。此更改需要对我们组织应用程序代码的方式进行一些调整

• ./app 通用代码文件夹。例如，用于模型、store 和一些控制器等内容。
• ./resources 所有构建通用的资源文件夹。
• ./classic/resources 用于 classic 构建特定的资源（如 .png 文件）。
• ./classic/src 用于 classic 构建特定的代码文件夹。
• ./modern/resources 用于 modern 构建特定的资源（如 .png 文件）。
• ./modern/src 用于 modern 构建特定的代码文件夹。

总结

现在您了解了使用 Ext JS 和 Sencha Cmd 启动并运行应用程序是多么容易。请务必查看 API 文档，了解我们在整个演练中探索的所有组件和类。

注意： _如果您对上述步骤的具体内容感到好奇，您可能需要查看我们的 Sencha Cmd 入门指南。