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

你可能感兴趣的:(Ext-js,extjs基础,extjs6-下载,extjs设置,ext-js)