01_入门指南--01_构建程序

入门指南

Ext JS 6和Sencha Cmd6的入门指南再简单不过了。使用一个简单的命令，你将会有一个功能齐备的通用初始应用程序，此程序可以在本地服务器上运行。

这个通用的程序包含一套核心数据存储，模板，和控制器，通过使用两种工具生成两套视图：经典工具和现代工具。

经典工具包包含了传统的代码库，可以支持传统的浏览器，平板电脑和触屏笔记本电脑。现在工具包包含了一套触屏代码厍，可以支持现代浏览器，平板电脑和手机。

让我们开始吧！

1、下载并安装Sencha Cmd 6：http://www.sencha.com/products/sencha-cmd/

2、下载并解压Ext JS开发包：http://www.sencha.com/products/extjs/evaluate/

3、打开你的终端或者控制台窗口，键入如下命令：

sencha -sdk /path/to/extjs/framework generate app AppName path/to/app cd /path/to/app sencha app watch

注释：出于演示的目的，AppName这里用MyApp，path/to/app将使用./MyApp

好了。你已经创建了一个程序并且部署了一个服务器。现在，在浏览器里打开网址：http://localhost:1841或者是你本地主机地址。现在你可以浏览你新生成的Ext JS 6程序。

Sencha Cmd现在正在监视你程序的变化。你将看到“Waiting for changes…”的消息提示，这表示你的程序是最新的。如果你对程序源码做一些更改并保存文件，你会发现其它的消息在屏幕上打印出来，但过一会将会“Waiting for changes…”替代。这个循环通常会耗费几秒钟时间，所以要确保在刷新浏览器与保存文件之间有足够的时间间隔。

注释：如果sencha app watch因某些原因无法检测到程序的变化，你可以仅仅有过停止程序（Ctrl+C）,然后重新键入命令app watch来修复。

注释：如果你对上述步骤的详情感兴趣，可以查看我们的Sencha Cmd使用说明章节（http://docs.sencha.com/cmd/guides/intro_to_cmd.html）。

下一步

如上所述，通用程序是由三个重要区域组成：

• 共享app区域：（这里面的数据仓储，模板和控制器对另两个区域都适用）。这个区域在你程序根目录下的app文件夹。

• 经典app区域：（视图与逻辑都是为了程序中的经典应用而设置）。这个区域在程序根目录下的classic/src目录下。

• 现代app区域：（视图与逻辑都是为了程序中的现代应用而设置）。这个区域在程序根目录下的modern/src目录下。

  应当注意到，这个小程序展现了Ext JS中很多的特性。这里没有足够的空间对所有的概念作深入阐述，所以我们只对相关的要点作概述。如果有可能在每个主题里，我们将尽可能向你讲解更有深度的信息。

  让我们从评估在目录MyApp/classic/src/view/main/下的经典主视图来开始吧。

经典的

当用户使用桌面浏览器或者平板电脑时，经典主页面将会展现，除非在你的构建目标中另有声明。

使用你喜欢的集成开发工具或文本编程器，打开文件MyApp/classic/src/view/main/Main.js.这是我们经典应用程序的主入口。当然，它也是盛放我们的tabpanel和它的四个选项卡（tabs）的窗口。此外，你将看到，第一个选项卡包含了我们的grid类。

让我们看一下选项卡。

选项卡

TabPanel可以同标准的Panel一样作布局之用，但他们对盛放子组件有一些特别的支持。这些子组件被用Card布局管理器来管理，显示为分开的选项卡。

经典的选项卡默认水平放置于子项内容的顶部。然而，在程序中，我们可以更灵活一点的使用它们。

你或许注意到我们的选项卡跟传统的不一样。那是因为我们已经为这些选项卡创建了自定义UI。

UI样式

Ext JS框架中的每个组件都有一个ui配置选项，默认值为default。这个属性可以被修改，来为程序中的组件配置不同的样式 。

大多数的Ext JS组件有SASS@mixin's配置来让你可以快速生成新的UI。这些组件包括：Ext.panel.Panel，Ext.button.Button，Ext.Toolbar，Ext.window.Window，还有其它更多。

 

让我们打开我们的tabpanel的自定义UI，看一下它的实现原理。你可以看到你的tabpanel UI定义在如下文件里：`classic/sass/src/view/main/Main.scss`

 

你可以看到，创建UI非常简单。仅仅只需要为你要创建UI的组件调用相关的@mixin即可。

@include extjs-tab-panel-ui(

   $ui: 'navigation'

);

所有在@mixin里的变量可以按照你想要的方式任意修改。

响应式

你或许已经注意到，我们向tabPanel和tabConfig添加了响应式插件。

// TabPanel    responsiveConfig: {    tall: {        headerPosition: 'top'    },    wide: {        headerPosition: 'left'    }},// Tab ConfigtabConfig: {    plugins: 'responsive',    responsiveConfig: {        wide: {            iconAlign: 'left',            textAlign: 'left'        },        tall: {            iconAlign: 'top',            textAlign: 'center',            width: 120        }    }}

这个插件可以让我们基于viewport的宽高，设置规则来修改tabpanel及tab上的文字位置。在上例中的配置下，如果你让浏览器窗口的宽度比高度小（即wide小于tall），tabpanel将会移到屏幕的顶部，tab上的文字与图形将会相应地重新定位（即使用tall里面的配置，选项卡位于top

tall: {        headerPosition: 'top'    }）

。

如果宽度比高度更大，选项卡会出现在屏幕的左侧（根据responsiveConfig里的配置），对文本与图标的位置也作相应的调整（tabConfig里的配置）。

你可以读更多关于响应式插件的文章，并且让你的程序在多种不同的环境中正常运行（查阅地址：http://docs.sencha.com/extjs/6.2.1/guides/application_architecture/developing_for_multiple_screens_and_environments.html）。

你或许已经注意到，我们没有在tab 2,3和4里写数据硬编码。那是因为我们使用了视图模型来进行数据绑定。

视图模型和数据绑定

视图模型和数据绑定可以让你能用更少的代码写出具有声明式样式的代码。一个视图模型是一个管理数据对象的类。它允许组件通过绑定来与其中的数据关联，当数据改变时它会收到通知（触发事件）。视图模型跟视图控制器一样，都是被指向它的视图所拥有。

 

大多数情况下，任何有setter方法的配置项都可以在视图模型里被绑定到数据上。例如，我们将利用setHtml()和setTitle()方法来演示。

让我们看一下下面的代码行：

// View Model DeclarationviewModel: 'main',// Binding to header's titleheader: {    title: {        bind: {            text: '{name}'        },        flex: 0    }},// Binding to tab's HTML config{    title: 'Users',    iconCls: 'fa-user',    bind: {        html: '{loremIpsum}'    }}

你可以看到数据从通用的视图模型（app/view/main/MainModel.js）被绑定到选项卡和程序的标题上。在视图模型中的数据是静态填写进去的，在实际开发中，一般通过代理来生成。

请查看我们的视图模型与数据绑定指南章节来获取更多信息（http://docs.sencha.com/extjs/6.2.1/guides/application_architecture/view_models_data_binding.html）。

 

表格（Grid）

接下来，让我们打开文件MyApp/classic/src/view/main/List.js来看一下Ext.grid.Panel组件。List.js含有你的主tabpanel里的第一个选项卡里的表格。使用最少量的代码，我们创建了具有完整功能的表格。默认情况下，每列都是可以排序的，当你点击列头时，会在升序与降序之间切换。默认情况下，列头也是可以重新订制的，每个列头上有一个下拉菜单，你可以通过此下拉菜单里的选项来显示或隐藏列。

不仅如此，单独配置每列也是相当容易。

让我们更仔细地分析一下两个表格的配置项吧：

数据仓储（store）

正如你所看到的，我们是人为地设置数据仓储的。如果你仔细看，你或许会注意到在经典程序的区域并没有定义数据仓储。这是因为此数据仓储位于通用程序的区域（简称通用区域）app/store/Personnel.js。我们把数据仓储放在这里是想让经典的表格和现代的表格可以共享相同的仓储和数据。

在真实环境中，上面的仓储会有一个带有url属性的代理，通过代理从服务器端拉取需要的信息。在此示例中，我们把数据放在行内是为了便于形象化。然而，多数情况下，都不会使用行内数据的。

监听器(listeners)

你应该也注意到监听器对象包含了一个select事件，该事件调用了'onItemSelected'。然后，你没有在经典区域的代码中发现有逻辑功能的视图控制器。你将会发现在公共区域的MainController.js文件中有此方法，Modern和Classic的表格都共享select事件，并且将事件处理函数映射到此事件上。

如果你还没有太明白，就打开app/view/main/MainController.js.文件看一下吧。

你将看到最基本的逻辑：

onItemSelected: function (sender, record) {    Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);},

在经典跟现代开发工具（过会再讨论）中的grid，我们都在处理select事件。控制器在逻辑上对两种组件作相同的处理。

我们将会在下面的章节中更多地讨论通用控制器。

现代的

正如经典区域一样，让我们从查看文件MyApp/modern/src/view/main/Main.js开始学习现代区域的代码 。

这是现代浏览器程序的主入口。与经典区域有同样的结构，你将发现Main是一个容器，里面盛放了我们的tabpanel,及tabpanel的四个选项卡。此外，你将看到在第一个选项卡里有我们的现代模式的表格。

选项卡

现代模式的开发工具箱的tabpanel提供了一个极好的方式让用户在多个不同的满屏界面间切换。每个全屏组件在TabPanel里有它自己的选项卡，当选项卡被点击时组件即被显示出来。选项卡可以位于TabPanel的顶部或底部。

你将会看到此区域的视图代码与经典区域的视图有很多相似之处。例如：

*共享的视图控制器

*共享的视图模型

*绑定配置

现代的表格

现代模式的开发套件中包含了为触摸设备最优化的轻量级的表格。现代表格让在触摸设备上获取，分类，过滤和编辑少量数据更容易。使用列渲染器，可以很容易地配置和自定义任何列。

如同经典工具套件中的表格有一样，你可以看到工个共享的通用数据仓储（store）和监听器对象（listeners）用于捕获select事件。

通用程序

 

我们已经谈及了在我们程序中位于通用区域的所有代码。也就是说，当你使用这个区域时，你要需要确保你十分仔细并始终如一。这时，你应该避免放置程序视图到通用区域。在程序构建时，如果你引用了没有在对应的经典或现代套件中的类，你将会遇到错误。

这块区域应该用来放置在两种套件中都有用到的代码。

*视图控制器

*视图模型

*模型

*仓储

往前继续，我们将更多讨论相似组件的功用，从而对视图的一些术语不做过多涉猎。

最后，你应该要确认一下，在两种工具套件中，任何你正在试图去使用的事件都要有相同的参数，并用相同的使用目的来触发。

更改主题

现在让我们把焦点放在程序的感观上。除非你为程序指定其它主题，否则程序默认使用的主题是Triton。也就是说，一旦你的程序被创建，切换主题是相当容易的事情。

让我们来试一下Ext JS的Crisp主题。

你所需要做的是，打开程序根目录下的app.json文件，然后将theme属性从:"theme":"theme-neptune"更改为："theme":"theme-crisp"。

一旦监视工具编译结束，刷新页面，你将看到你的程序有了新的外观。

为程序配置样式

在多数场合下，你需要在默认主题的基础上定制化你的程序的外观。你的程序看起来虽然不错，但是蓝色并不是你想要的。让我们把激活的选项卡的颜色变得更适合我们的应用吧。

注释：下面的步骤将会调整我们程序中的经典的视图。在不久的将来，Ext JS 6将会使用一个程序来调整两种套件（经典与现代）的主题。

通过创建和修改SCSS文件，你可以很容易高效地调整你程序的样式。

SCSS(Sassy CSS)是一种SASS语法，它允许你添加嵌套规则，变量以及混合变量到你的设计规范中（也就是在SCSS文件中可以使用它些功能）。

这些新增的功能然后可以被处理并被转化为供你程序使用的传统的CSS文件。

要查看一系列的全局SCSS变量，请查看我们的API文档：http://docs.sencha.com/extjs/6.2.1/modern/Global_CSS.html。

单独的组件也有可以让你配置的SCSS变量。例如，访问说明文档中的Panel API页面，滚动鼠标定位到SCSS Variables章节，你可以你可以查看Panel SCSS变量（http://docs.sencha.com/extjs/6.2.1/modern/Ext.panel.Panel.html）。

如果你打开上面程序中的文件夹：classic/sass/src/view/main/，你将看到一个文件名为 Main.scss的文件。类似的样式文件及相关文件夹，你可以根据需要手工添加。在你程序中的每个类，Sencha Cmd将会为此类检测相应的变量与规则。sass/var/为变量存放的文件夹，sass/scr/为规则存放的位置。

通过运行命令：sencha app watch，你添加的这些文件会被自动编译进程序中。

让我们继续看一下我们的Main.scss文件。

如你所见，我们为主视图定义了一个特定的SCSS规则。顶部面板使用如下的代码行定义：

$ui-header-background-color: $base-color,

就此范围的颜色更改而言，你有两个选项。如果你仅仅想让这片区域不使用蓝色，你可以为它设置特别的颜色，像这样：

$ui-header-background-color: #87BD3E,

一旦此改变被监视命令捕获并编译进程序，你通过刷新页面就可以看到，被激活的（当前）选项卡的颜色现在已经变为绿色（#87BD3E）。

然而，如果你想要将整个程序的蓝色替换为绿色，你可以改变$base-color的值。为了实现全局规则定制的功能，在如下位置创建一个SCSS文件：

classic/sass/etc/all.scss // all.scss maycontain any SASS / CSS rules

一旦你创建了文件，你可以添加一个新的$base-color声明来覆盖程序主题中的$base-color值。在此示例中，我们还是设置为绿色。

$base-color: #87BD3E dynamic();

然后，刷新程序，你将看到有很多组件都已经变为那种绿色。

圆满完成

现在，你看到使用Ext JS和Sencha Cmd建造一个程序并使之运行是多么容易了吧。确保检验并阅读我们在此演练中探索过的所有组件及类的API文档。