extjs创建项目

extjs 创建项目

创建项目命令

sencha generate app --ext MyApp ./myapp  // 默认使用最新版
sencha generate app --ext@6.0.0.640 MyApp ./myapp  // 限定版本创建

运行上面的命令将会创建名为 MyApp 的 Ext JS 应用，应用所有的文件都放在当前目录下名为 myapp 的文件夹。默认创建两套，分别是 classic 或者 modern 工具包

生成 PC 端或者手机端其中一套

sencha generate app --ext --modern MyApp ./myapp

运行上面的命令将会生成移动端的代码。也可以注释掉 app.json 里面的代码。

"builds": {
    //这里就很简单了，如果你只想用 classic 那么就注释 modern 的配置即可。
    "classic": {
       "toolkit": "classic",
       "theme": "theme-triton"
    },
    "modern": {
       "toolkit": "modern",
       "theme": "theme-neptune"
    }
}

生成的结构为：

应用包含了 model , store , 和 application.js。 你就把 store 看成是一个 model 实例的集合。store 是为你的程序功能提供并加载数据用的，你可以认为 store 就是一个数据源，它支持排序，过滤，分页等等，经常用到 store 的就是 grid 组件

而这个 main.scss 文件是样式文件，在 classic 和 modern 工具包都存在，对应桌面和移动设备的样式。

还有就是在根目录也有一个 sass 文件夹，那里是放置应用所有设备共用的样式。

Model(模型)

这代表着数据层。model 保存的数据可以包含数据验证和逻辑，model 经常用于 store 中。上文已经讲过，store 就是多个 model 的集合。

View(视图)

这一层就是用户界面。包含有 button，form，和 message box 等等组件。

Controller(控制器)

控制器处理 view(视图)相关的逻辑，例如 view 的 event(事件)处理，还有任何程序相关逻辑都可以写在这里。

View model (视图模型)

view model 封装了 view(视图)所需要的展示逻辑，绑定数据到 view 并且每当数据改变时处理更新。

app.js

Ext.application({
  name: "MyApp",
  extend: "MyApp.Application",
  requires: ["MyApp.view.main.Main"],
  mainView: "MyApp.view.main.Main",
});

在上面代码中，name 定义了程序的名称，extend 表示继承 MyApp.Application 类，这个类文件定义在 app 文件夹下名为 Application.js :

extend: ‘MyApp.Application’

requires 部分指定了这个类需要的类列表。这样在 requires 里面添加的类在当前类中首次实例化时，会去先加载它，你可以把 requires 的作用理解为 java 中的 import ** 关键字。mainView** 指定的是要初始化创建的 view(视图)。

Application.js

Ext.define("MyApp.Application", {
  extend: "Ext.app.Application",
  name: "MyApp",
  stores: [
    // TODO: add global / shared stores here
  ],
  launch: function () {
    // TODO - Launch the application
  },
});

这里你可以看到 MyApp.Application 继承自Ext.app.Application 。这个 launch 函数是在 **Ext.app.Application ** 类里。这个函数将会在页面加载完成后调用。

这个 stores 是指定需要的 store 的，这里并没有用到，你将在后面的章节中学习到关于 store 的更详细的知识。

视图模型 – MainModel.js

现在看一下 \app\view\main 目录下的 MainModel.js 文件。这个类是 Main 视图的 view model(视图模型)。这个视图模型继承自 Ext.app. ViewModel ，代码如下所示：

Ext.define("MyApp.view.main.MainModel", {
  extend: "Ext.app.ViewModel",
  alias: "viewmodel.main",
  data: {
    name: "MyApp",
    loremIpsum:
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
});

控制器 – MainController.js

这个类是 Main 视图的控制器。在下列代码中你可以看到 onItemSelected 函数，这个函数将在视图里的 grid 中选中某一项时触发调用。这是什么原理呢？后面会讲到的。

Ext.define("MyApp.view.main.MainController", {
  extend: "Ext.app.ViewController",
  alias: "controller.main",
  onItemSelected: function (sender, record) {
    Ext.Msg.confirm("Confirm", "Are you sure?", "onConfirm", this);
  },
  onConfirm: function (choice) {
    if (choice === "yes") {
      //
    }
  },
});

我们可以看到 extend 继承了 Ext.app.ViewController 这个类。Ext JS 中有两种类型的控制器： Ext.app.ViewController 和 Ext.app.Controller 。

Main.js

如果你用的是 Sencha Cmd 5,，并且你生成应用时执行了使用哪种 toolkits 工具包，是** –modern** 或 –classic ，如果是这样那么 Main.js 文件就在\app\view\main 文件夹下面。但是如果你用 Sencha Cmd 6 生成的是通用的应用，那么将会有两个 Main.js ** 文件，分别在 \modern\src\view\main** 和**\classic\src\view\main** 目录下面。

在查看这两个文件的内容之前，我先通过这两个不同路径的 Main.js 文件来解释一下。在本章的上文中，你已经知道为什么 Ext JS 6 合并了 Ext JS 和 Sencha Touch 为一个框架。这两个框架合并后共用一个核心，剩下的代码则分为两部分 classic 和 modern。传统的 Ext JS 代码移动到 classic 工具包，而 modern 的代码支持触摸和 HTML5 在 modern 工具包。所以这里需要两个工具包，程序会根据访问设备自动使用对应的工具包里的 UI 类(view)。

• 应用分两个工具包并共享核心资源和逻辑，这称为通用应用。

Ext.define("ComstartTest.view.main.Main", {
  extend: "Ext.tab.Panel",
  xtype: "app-main",

  requires: [
    "Ext.MessageBox",

    "ComstartTest.view.main.MainController",
    "ComstartTest.view.main.MainModel",
    "ComstartTest.view.main.List",
  ],

  controller: "main",
  viewModel: "main",

  defaults: {
    tab: {
      iconAlign: "top",
    },
    styleHtmlContent: true,
  },

  tabBarPosition: "bottom",

  items: [
    {
      title: "Home",
      iconCls: "x-fa fa-home",
      layout: "fit",
      // The following grid shares a store with the classic version's grid as well!
      items: [
        {
          xtype: "mainlist",
        },
      ],
    },
    {
      title: "Users",
      iconCls: "x-fa fa-user",
      bind: {
        html: "{loremIpsum}",
      },
    },
    {
      title: "Groups",
      iconCls: "x-fa fa-users",
      bind: {
        html: "{loremIpsum}",
      },
    },
    {
      title: "Settings",
      iconCls: "x-fa fa-cog",
      bind: {
        html: "{loremIpsum}",
      },
    },
  ],
});

这个 Main 视图是一个 tab panel，因为它继承了 Ext.tab.Panel 。这个类有属性 controller ， viewmodel ，requires 配置了需要依赖的类。创建了四个 tab 页(items 属性)，并且绑定了数据 ViewModel 里的 loremIpsum 属性。你将会在后续章节中了解关于此更多的详细信息。

接着看一下在 **\classic\src\view\main** 下的 **Main.js** 文件内容：

Ext.define("ComstartTest.view.main.Main", {
  extend: "Ext.tab.Panel",
  xtype: "app-main",

  requires: [
    "Ext.plugin.Viewport",
    "Ext.window.MessageBox",

    "ComstartTest.view.main.MainController",
    "ComstartTest.view.main.MainModel",
    "ComstartTest.view.main.List",
  ],

  controller: "main",
  viewModel: "main",

  ui: "navigation",

  tabBarHeaderPosition: 1,
  titleRotation: 0,
  tabRotation: 0,

  header: {
    layout: {
      align: "stretchmax",
    },
    title: {
      bind: {
        text: "{name}",
      },
      flex: 0,
    },
    iconCls: "fa-th-list",
  },

  tabBar: {
    flex: 1,
    layout: {
      align: "stretch",
      overflowHandler: "none",
    },
  },

  responsiveConfig: {
    tall: {
      headerPosition: "top",
    },
    wide: {
      headerPosition: "left",
    },
  },

  defaults: {
    bodyPadding: 20,
    tabConfig: {
      plugins: "responsive",
      responsiveConfig: {
        wide: {
          iconAlign: "left",
          textAlign: "left",
        },
        tall: {
          iconAlign: "top",
          textAlign: "center",
          width: 120,
        },
      },
    },
  },

  items: [
    {
      title: "Home",
      iconCls: "fa-home",
      // The following grid shares a store with the classic version's grid as well!
      items: [
        {
          xtype: "mainlist",
        },
      ],
    },
    {
      title: "Users",
      iconCls: "fa-user",
      bind: {
        html: "{loremIpsum}",
      },
    },
    {
      title: "Groups",
      iconCls: "fa-users",
      bind: {
        html: "{loremIpsum}",
      },
    },
    {
      title: "Settings",
      iconCls: "fa-cog",
      bind: {
        html: "{loremIpsum}",
      },
    },
  ],
});

上面代码中，items 中的代码几乎和 modern 工具包中的是一样的。此外，这个文件有些配置是专用于支持响应设计的。下列代码告诉框架使用的 **ui ** 组件为 navigation ：

ui: ‘navigation’

在第 8 章(主题和响应设计)中会介绍关于这个 UI 配置和响应设计的内容。

同样的，如果你打开 classic 或 modern 下的 List.js ，你会发现他们只有很细微的区别。

探索 Sencha Cmd 命令

现在让我们学习 Sencha Cmd 的一些非常有用的命令。

Sencha 命令格式

Sencha 命令采取以下格式：

sencha [category] [command] [options…] [arguments…]

在 Sencha Cmd 中许多命令和可选项。我们看一下都有哪些比较重要的命令。

获取一个特定类别的帮助信息，类别名称紧随在 help 后面，例如获取一个类别 app 的帮助信息，运行下列命令：

升级 Sencha Cmd

如果你想检查是否有 Sencha Cmd 可用的更新，使用以下命令：

sencha upgrade --check

如果你要升级 Sencha Cmd，只需要移除–check 选项，如以下代码所示：

sencha upgrade

生成一个应用

Sencha Cmd 支持 Ext JS 4.1.1a 及更高版本和支持 Sencha Touch 2.1 及更高版本。你电脑上可以存在多个版本的 SDK。这是基于 Sencha SDK 生成应用的命令格式，例如 Ext JS 或者 Sencha Touch：

sencha -sdk /path/to/sdk generate app [--modern/classic] MyApp /path/to/myapp

这个示例代码将在目录 /Users/SomeUser/projects/extjs/myapp 下生成名为 MyApp 的 Ext JS 6 应用 ：

sencha -sdk /Users/SomeUser/bin/Sencha/Cmd/repo/extract/ext/6.0.0/ generate app MyApp /Users/SomeUser/projects/extjs/myapp

构建应用

运行下列命令将进行构建 HTML，JS，SASS 等等：

sencha app build

使用 Sencha Cmd 6 构建 Ext JS 6 应用，你还可以运行下列命令选择构建 moern 或 classic 风格的应用：

sencha app build modern
sencha app build classic

这里说一下，modern 和 classic 的构建配置在 app.json 。 默认 Sencha Cmd 运行两个构建配置： classic 和 modern 。如果需要你也可以在 app.json 中添加额外的构建配置。

启动应用

watch 命令用于重新构建并启动应用。这不仅会启动应用程序,还监视任何代码更改，一旦代码改变，浏览器刷新将包括最新的代码：

sencha app watch

在 Sencha Cmd 6 和 Ext JS 6，你也可以运行下列命令选择 modern 或 classic：

sencha app watch modern
sencha app watch classic

代码生成

用 Sencha Cmd，你可以生成 Ext JS 代码，例如 view，controller，model：

sencha generate view myApp.MyView
sencha generate model MyModel id:int,fname,lname
sencha generate controller MyController

当你生成 model 时如果不指定字段类型，默认类型是 string。

升级你的应用

Sencha Cmd 升级 SDK 的版本是很容易的。使用这个升级命令将你的程序升级到新框架：

sencha app upgrade [ path-to-new-framework ]  // path-to-new-framework为新的框架的目录