Ext JS 6 下载与设置

Decument http://docs.sencha.com/extjs/6.0.2-classic/guides/getting_started/getting_started.html

Setup & Getting Started

下载安装Sencha Cmd 6 http://www.sencha.com/products/sencha-cmd/
下载安装Extjs SDK http://www.sencha.com/products/extjs/evaluate/

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

extjs/framework为sdk解压后的目录. path/to/app为生成的AppName的目录，你可以通过http://localhost:1841/ 访问刚刚生成的应用

认识创建好的App

app由三个重要的部分组成：
1. Shared app area(通常为stores, models, and controllers), 它保存在根目录下的app文件夹
2. Classic app area(应用程序的经典部分views and logic, 即兼容老式浏览器，适合于开发传统的ext js组件)，它保存在根目录下的classic/src http://localhost:1841/ 或者
3. Modern app area,(适用于开发不同设备，不同浏览器的应用) 对应为modern/src http://localhost:1841/?modern

Classic 介绍

Classic视图主要应用于桌面和平板的浏览器，适用于传统的extjs组件。它位于MyApp/classic/src/view/main/Main.js. 它是我们classic应用的入口文件。它包含了一个tabpanel
和4个tab. 并且在第一个tab中包含一个grid面板.

Tabs

TabPanels可以跟标准的Panel一样，用于布局，但它们对于子组件也有特定的支持(items).它的子组件使用Card布局管理器。用来显示特定的tab.
Tabs默认为水平排列在子项的顶部，然而，我们的应用中，通过设置，我们将它们排列在左侧, 同时，它跟我们传统的tabs不同，这是因为我们可以创建自定义的UI.

UI Styling

在Ext JS framework中，每一个组件都有一个ui 配置项设置default的值，这个属性可以被改变，允许在我们的应用中，有不同的样式。
大部分的Ext JS组件，可以通过 SASS的@mixin快速的产生新的UIs. 这包括Ext.panel.Panel, Ext.button.Button, Ext.Toolbar, Ext.window.Window等等。

让我们打开tabpanel的自定义组件

classic/sass/src/view/main/Main.scss

跟你看到的一样，创建组件的样式UIs非常简单。调用相关组件的@mixin, 就可以创建一个UI

@include extjs-tab-panel-ui(
    $ui: 'navigation'
);

在这个@mixin可，所有的变量都可以修改.你可以通过以下的代码将UI附加到你的组件中。

ui: 'navigation'

我们在之后的页面中，会详细讨论SASS.

Responsive

你可能已经注意到，我们为tabPanel和tabConfig中添加了Responsive 插件

// TabPanel
responsiveConfig: {
    tall: {
        headerPosition: 'top'
    },
    wide: {
        headerPosition: 'left'
    }
},

// Tab Config
tabConfig: {
    plugins: 'responsive',
    responsiveConfig: {
        wide: {
            iconAlign: 'left',
            textAlign: 'left'
        },
        tall: {
            iconAlign: 'top',
            textAlign: 'center',
            width: 120
        }
    }
}

这个插件允许我们设置规则，使得平板和tab中文件/图标的位置可以基于viewport的宽和高的改变而改变。你可以能过http://docs.sencha.com/extjs/6.0.2-classic/guides/application_architecture/developing_for_multiple_screens_and_environments.html
了解更多响应式布局。

View Models and Data Binding

结合View Models and Data Binding允许你在声明样式中，以最小的代码，实现更多的功能。
一个View Model是一个类(class)用来管理data对像。然后它允许组件绑定它想要的数据，并且在数据改变时，组件可以获得通知。比如ViewController

在多数情况下，配置是通过setter方法进行设置，它们可以在ViewModel中用于数据绑定。对于这个例子，我们使用了setHtml()和setTitle()方法。

// View Model Declaration
viewModel: 'main',

// Binding to header's title
header: {
    title: {
        bind: {
            text: '{name}'
        },
        flex: 0
    }
},

// Binding to tab's HTML config
{
    title: 'Users',
    iconCls: 'fa-user',
    bind: {
        html: '{loremIpsum}'
    }
}

你们可以看到数据已经从ViewModel (app/view/main/MainModel.js)绑定到tabs和app的title, 在这个ViewModel中，数据是静态设置的，但大部分情况下，它们是通过proxy生成的
可以能过ViewModels and Data Binding Guide[http://docs.sencha.com/extjs/6.0.2-classic/guides/application_architecture/view_models_data_binding.html]了解更多信息。

Grids

接下来，让我们看看Ext.grid.Panel, 打开MyApp/classic/src/view/main/List.js
List.js会在第一个tab中加载， 我们以最小的代码，创建了一个功能全面的grid. 默认情况下，每一列都可以进行排序，点击顶部可以进行升序和降序的转换。每一列顺序也可以通过拖放进行改变。

不仅如此，我们还可以独立的配置每一列。
让我们进一步分析grid的配置：

Store

我们设置的store为”personnel”, 它不在classic区域，而是位于通用区域app/store/Personnel.js, 所以Classic grid和Modern grid可以使用一样的store和data.
在实际的开发中，上面的store可以为一个proxy, 设置在url属性中，用来从服务器上获取信息。而在这个例子中，我们使用内联的虚拟数据。

Listeners

你可能已经注意到Listener对像，包含一个select事件，它的回调函数为’onItemSelected’. 同样，你不可能在Classic区域中找到这个方法，因为位于app/view/main/MainController.js. 它同样适用于classic和modern.

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

Modern

MyApp/modern/src/view/main/Main.js, 对于ViewController, ViewModels, Models, Stores, 以及Tabs和Grid的概念跟Classic类似，我们讲讲以下新的概念

Change Themes

在每个新的Application创建时，生成的默认theme为Triton. 但在你应用创建后，也可以简单的切换不同的themes.
让我们试一下Crisp theme

打开app.json

"theme": "theme-triton",

为

"theme": "theme-crisp"

Styling Your Application

在很多场合下，你都需要自定义你的应用，在这里，我们将改变tabs的active为蓝色。

在当前，以下面的步聚只会影响到classic view. 在不久，Ext JS6将对view的主题进行改变，使得相同应用中的classic 和modern都有效

你可以通过创建和修改SCSS文件，修改应用程序的样式. 为了查看全局的SCSS变量，你可以查看API文档, Global_CSS[http://docs.sencha.com/extjs/6.2.0-classic/Global_CSS.html]

单独的组件也有专门的SCSS变量，比如，Panel SCSS变量，可以在Ext.panel.Panel[http://docs.sencha.com/extjs/6.2.0-classic/Ext.panel.Panel.html]中的”CSS Variables”查看。

如果你打开classic/sass/src/view/main/目录，你会看到Main.scss文件。这些目录和文件可以按需要手动添加，对于应用程序中的每一个类，Sencha Cmd根据sacc/var中定义的变量和sass/src中定义的规则，进行检查。

当你添加新的SCSS文件时，sencha app watch会将它们收录到整个APP样式中。

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

如果看到的，最顶层的面板，extjs-panel-ui，有以下的背景颜色

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

可以更改为

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

如果你想修改整个Application,你可以在以下的位置创建一个全局的规则

classic/sass/etc/all.scss // all.scss may contain any SASS / CSS rules

当你创建完这个文件后，可以添加@base-color，重写app theme中的@base-color

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

sencha cmd

sencha generate app DesktopApp Classic ../Desktop
sencha generate app MobileApp Modern ../MobileApp
sencha generate app DemoApp ../DemoApp
Build application
sencha app build
sencha app refresh
sencha app watch