构建响应式仪表盘

在最新版本的 Sencha Architect 中，我们添加了对 Ext JS 6 的支持，引入了一种使用 MVVM 构建应用程序的全新方式。

在本指南中，我们将介绍 3 个新概念：响应式配置、视图控制器和视图模型。在此过程中，我们将构建一个仪表盘应用程序，其中涉及导航和一个显示损益数字的网格 - 与 Sencha 客户每天构建的应用程序类型相同。

先决条件

要学习本教程，您需要以下内容

• 下载 Architect（如果您还没有，请开始 30 天免费试用！）
• 按照安装和设置指南进行操作
• 下载 resources.zip，其中包含我们将在本教程中使用的数据

创建新项目

首先，打开 Architect 并通过选择“空白项目”创建一个新的 Ext JS 应用程序。

Architect 界面加载后，立即保存项目。出现提示时，输入以下内容

• 将项目保存到磁盘
• 项目名称：Dashboard
• 应用名称：Dashboard

保存完成后，将出现“应用程序重命名”对话框。您可以单击“否”，因为这是一个全新的应用程序。

然后，项目应开始初始化 Cmd。

复制资源

我们之前下载的资源特定于我们正在构建的应用程序，包含数据（JSON 文件形式）、图像和图标。打开文件资源管理器，找到您的项目并删除现有的 resources 目录。

然后将新的 resources 解压缩到位（例如 c:\projects\dashboard\resources\）。

创建主视图

主视图将充当我们应用程序的主要容器。让我们创建一个具有一些响应性的选项卡面板，方法如下

• 在工具箱（Architect 的左上角）中找到的“Filter”（过滤器）输入框中单击
• 键入“Tab Panel”（选项卡面板），然后将结果记录拖到主画布上
• 将其 userClassName 设置为 Main

接下来，在我们的选项卡面板上设置以下配置。

注意： 如果它们不是立即可见的，您可以使用配置过滤器来隔离它们。

• tabBarHeaderPosition 为 1
• titleRotation 为 0（单击编辑按钮，在结果对象中键入 0，然后单击复选框以完成）
• tabRotation 为 0
• 通过单击配置旁边的“x”清除 height（高度）和 width（宽度）
• 将 header（页眉）更改为对象 [请参见下图]

让我们通过单击图标 编辑 header 对象

将以下代码复制并粘贴到结果对象中

{
    layout : {
        align : 'stretchmax'
    },
    iconCls : 'exec-header-icon',
    title : {
        text      : 'MyBiz',
        textAlign : 'center',
        flex      : 0,
        minWidth  : 160
    }
}

接下来，让我们在配置搜索中搜索“Tab Bar Config”（选项卡栏配置），并通过单击结果配置旁边的“+”图标添加自定义选项卡栏。在检查器中选择新的选项卡栏，并将 flex 设置为 1。

再次选择主视图，并删除在 Main 下默认创建的 3 个选项卡。

最后，将 headerPosition（页眉位置）设置为 left（左侧），我们就完成了！

响应式配置

通过将 responsiveConfig 添加到我们的选项卡配置中，我们的应用程序可以在不同屏幕（例如，桌面浏览器与手机屏幕）上查看时做出相应的反应。这非常容易做到！

首先，在“项目检查器”中选择 Main 视图。在配置过滤器中，将 defaults（默认值）设置为以下内容

{
    tabConfig: {
        responsiveConfig: {
            wide: {
                iconAlign: 'left',
                textAlign: 'left',
                flex: 0
            },
            tall: {
                iconAlign: 'top',
                textAlign: 'center',
                flex: 1
            }
        },
        plugins: 'responsive'
    }
}

此配置将告诉选项卡根据屏幕是较高（纵向）还是较宽（横向）而以不同的方式显示 - 这在平板电脑上非常有用。

ViewModel

接下来，选择 ViewModel MainViewModel。然后将其数据配置设置为

{
    name: 'Dashboard'
}

此时，我们有了一个导航窗格！

应用程序数据

我们的视图将是一个 Grid（网格），就像您在 此示例 中看到的那样。请记住，我们正在构建一个仪表盘应用程序，因此网格将显示我们公司运营的所有地区的“损益”数据。数据是这里的重点。网格将把它带到最前沿，并允许用户对其进行排序和探索。我们还将在稍后添加过滤区域的功能。

添加模型

首先，让我们添加一个 Model（模型）。在工具箱（左上角）中过滤“Model”。

将“Model”拖到模型检查器节点上。这是“应用程序”下的节点，与“视图”、“控制器”、“Store”等处于同一级别。

将其 userClassName 设置为 ProfitLoss，并将其 userAlias 设置为 profitloss。

接下来，我们将利用 Architect 的一个非常有用的功能。Architect 可以将逗号分隔的列表转换为字段。这为您节省了大量手动输入。要使用此功能，请单击模型配置面板中 Fields（字段）旁边的 (+) 号。将以下逗号分隔的数据粘贴到“字段”中

account, q1_2010, q2_2010, q3_2010, q4_2010, q1_2011, q2_2011, q3_2011, q4_2011, q1_2012, q2_2012, region

粘贴数据后，单击“完成”，您的字段将生成。

添加 Store

现在让我们创建一个 JSON store（JSON 数据存储）。在工具箱中过滤“JSON Store”，然后将生成的 JSON Store 拖到 store 检查器节点上。

• 将其 userClassName 设置为 ProfitLosses
• 将其 userAlias 设置为 profitlosses
• 将其 model 设置为 ProfitLoss
• 将 autoLoad 设置为 true
• 选择其 proxy（代理），并将 url（URL）设置为“resources/data/full_data.json”

注意： 如果代理 URL 在您的 JSON Store 旁边创建了一个红色错误图标，您可能需要将代理 url 更改为“Dashboard/resources/data/full_data.json”。这与您的 localhost 设置方式有关。

现在我们的应用程序已准备好加载我们的数据！

添加 Grid

将“Grid Panel”（网格面板）拖到 Main 视图上 - 这应将网格创建为子组件。

然后在网格上设置以下配置

• 将其 title（标题）设置为 Profit and Loss（损益）
• 将 store（数据存储）设置为 ProfitLosses

在我们的应用程序中，我们可能希望在其他地方重用此网格...因此，让我们右键单击网格并选择“Promote To Class”（提升为类）。这会将网格的定义移动到项目检查器中“视图”的根级别，但在我们的 Main 视图中留下“Profit and Loss”的实例作为子项。

选择“视图”下的新视图 (MyGridPanel) 并执行以下操作

• 将其 userClassName 设置为 ProfitLoss

接下来，选择 ViewController ProfitLossViewController，并确保其 alias（别名）为 profitloss。对 ViewModel ProfitLossViewModel 执行相同的操作

接下来，确保网格的 viewModel 配置在 ProfitLoss 网格上设置为 profitloss。

继续并右键单击网格 ProfitLoss，然后选择“Grid Builder”（网格构建器）。您现在应该看到一个新的模态窗口，其中显示了我们之前输入的每个字段的列！

选中窗口底部的“Remove Existing”（删除现有列）框以删除默认列。

注意： 您需要通过模态框确认此选择。

单击“生成”，您应该看到您的所有字段都变成网格上的列。

注意： 如果您使用的是旧版本的 Architect，则可以使用“Auto Columns”（自动列）而不是“Grid Builder”。

试一下！

如果您已完成到此步骤，那么做得很好！

接下来，保存项目，然后单击“Preview App”（预览应用程序），这应该在您的浏览器中启动该应用程序。

如果您没有看到网格内容，并且/或者在控制台中收到错误，请确保您的网格面板上的 store 已正确设置。

添加功能

让我们首先添加一个下拉菜单，以过滤掉网格上的区域。我们想添加一个新的数据源，其中包含我们的区域列表，以便用户可以在网格中切换不同的区域。为此，我们将添加一个新的模型、store，然后添加一些 ViewController 行为，以在用户按区域过滤时做出响应。

首先，我们应该添加下拉过滤器菜单。选择我们的 ProfitLoss 网格，并将工具栏拖到网格面板上。然后

• 向工具栏添加一个按钮
  • 将 text（文本）设置为 Region（区域）
  • 将 width（宽度）设置为 150
  • 将 textAlign（文本对齐方式）设置为 left（左对齐）
  • 将 reference（引用）设置为 regionsButton
• 向按钮添加一个菜单
  • 将其 id 设置为 region-menu
  • 从中删除菜单项，因为我们稍后将动态添加这些项
  • 搜索菜单的 floating（浮动）配置并将其设置为 true
  • 将其 width（宽度）设置为 200

接下来，让我们添加新模型。从工具箱将“Model”拖到“项目检查器”上。将其 userClassname 设置为 metaprofitloss，然后添加 fields（字段）

display, quarter, region

我们现在可以添加一个新的 store。选择网格的 ProfitLossViewModel。在“配置”面板中，向其添加一个 store（不是链式 store）。然后

• 将 name（名称）设置为 metaProfitLoss
• 将其 model（模型）设置为 metaprofitloss
• 将 autoload（自动加载）设置为 true
• 从工具箱将 Ajax 代理拖到 store
  • 将 url 设置为 resources/data/meta_data.json
• 返回到 metaProfitLoss store，添加一个 “View Controller 事件绑定”
  • 选择 “load”
  • 选择 onStoreLoad binding
    • 将其 fn 设置为 onMetaDataLoad

编辑 ViewController

既然我们已经配置了 UI，我们现在可以向 ViewController ProfitLossViewController 添加必要的逻辑。在你的项目检查器中选择它。

以下代码帮助填充菜单，显示我们可用的区域。将其复制并粘贴到 onMetaDataLoad 函数中（当鼠标悬停在 ViewController 代码的 onMetaDataLoad 部分时，点击编辑按钮）

var me = this,
    references = me.getReferences(),
    view = me.getView(),
    items = [],
    columns = [ view.regionColumn ];

    // iterate each record in the store
store.each(function (metaRecord) {
    var type = metaRecord.data.type,
        value = metaRecord.data.value,

        menuItem = {
            checked     : true,
            hideOnClick : false
        };

    // we only care about region data
    if (type === 'region') {
        items.push(Ext.apply({
            text  : metaRecord.data.display,
            value : value,
            type  : type,

            listeners : {
                click : me.onRegionItemClick,
                scope : me
            }
        },menuItem));
    }
});

items.sort(function (lhs, rhs) {
    return (lhs.text < rhs.text) ? -1 : ((rhs.text < lhs.text) ? 1 : 0);
});

// We want to tinker with the UI in batch so we don't trigger multiple layouts
Ext.batchLayouts(function () {
    references.regionsButton.menu.add(items);

    view.store.load(); // displays loadMask so include in layout batch
});

接下来，我们要为用户选择区域时添加点击处理程序。在上面的代码中，我们为名为 onRegionItemClick 的菜单项添加了一个监听器。让我们继续添加该函数处理程序 - 选择 View Controller，然后添加一个名为 onRegionItemClick 的函数。点击“完成”，因为我们不需要传入任何参数。

最后，通过单击函数名称旁边的箭头，将以下代码粘贴到函数内部

var view = this.getView(),
    filter = {
        // The id ensures that this filter will be replaced by subsequent calls
        // to this method (while leaving others in place).
        id       : 'regionFilter',
        property : 'region_filter',
        operator : 'in',
        value    : []
    },
    regionMenu = this.lookupReference('regionsButton').menu;
// note before we had set the reference on our button to regionsButton.  This is how we'll gain access to that component

regionMenu.items.each(function (item) {
    if (item.checked) {
        filter.value.push(item.value);
    }
});

if (filter.value.length === regionMenu.items.length) {
    // No need for a filter that includes everything, so remove it (in case it
    // was there - harmless if it wasn't)
    view.store.getFilters().removeByKey(filter.id);
} else {
    view.store.getFilters().add(filter);
}

现在我们可以测试我们的下拉过滤器了！保存项目，然后再次预览应用程序并尝试使用过滤器菜单。

下一步

我们一开始使用选项卡面板的全部原因是因为大多数仪表板都有多个屏幕。在你的选项卡面板中添加第二个面板，名为 Main；将其 title 设置为 Customer Feedback。

你正在构建一个成熟的仪表板应用程序的路上！