Sencha Cmd创建Ext JS示例项目

Sencha提供了免费的Cmd工具，可以用来创建Ext JS项目并提供了一些便利的功能。
Sencha也在官方文档中提供了一个示例来演示如何创建一个Sample Login App。
本文就介绍一下这个官网示例。

准备工作

• 下载Sencha Ext JS的SDK，本文中使用的是开源的GPL的6.0.1版本
• 下载Sencha Cmd，这个是免费的，本文中使用的是Windows 64-bit带JRE的6.1.2版本

一些废话：
也许Sencha是为了更好地推它的商用版本吧，从6.0.0版本开始，就把GPL版本的下载位置藏的很深，而且还需要通过发送邮件的方式来提供下载。

安装

• SDK解压缩放到一个指定目录，本文中为D:\ext-6.0.1
• Cmd安装到默认位置即可

一些废话：
6.x版本从以前方便很多，如果你使用的是5.x版本，那还需要额外安装JDK, ANT, Ruby, SASS, COMPASS，这里就不啰嗦了。

本文创建的示例项目的路径为D:\TutorialApp

那我们开始创建程序吧。
打开cmd命令行，使用sencha [-sdk SDK所在目录] generate app [-classic|-modern] AppName App目录命令来创建项目。

sencha -sdk D:\ext-6.0.1 generate app -classic TutorialApp D:\TutorialApp

• -sdk D:\ext-6.0.1指明Ext JS SDK的所在目录，如果运行命令行的所在目录就是SDK目录(D:\ext-6.0.1)，则可以省略
• -classic|-modern可以省略，Ext JS的6.0版本其中一个主要的更新就是把Ext JS和Touch合并，在创建时可以选择哪一种类型，classic对应Ext JS，而modern对应Touch。如果省略，则创建所谓的universal类型，即classic和modern并存。在本文中演示的是桌面端程序，所以我们选择classic。
• TutorialApp是项目名称，也将作为该项目的namespace。
• D:\TutorialApp是项目名录

一些废话：
运行命令后，可以去倒一杯水，起来活动活动，因为这个过程大概会持续几分钟。完成之后，看下TutorialApp目录的大小，会发现大概500M，真够大的。

从命令进入项目目录D:\TutorialApp，并输入命令sencha app watch

cd D:\TutorialAppsencha app watch

一些废话：
运行命令后，可以再起来活动活动。

sencha app watch会启动内置的jetty服务器，可以使我们方便地通过http://localhost:1841/ 来查看页面。而且watch会监听项目目录中的文件变化而自动build。

这时候打开http://localhost:1841/ 会看到Cmd自动创建的默认首页长这样子。6.x版新增加的Triton主题和以前的主题有明显的不同。

打开D:\TutorialApp目录，看下Cmd自动创建的目录和文件：

.sencha/ ???????????????????????# 里面存放的大多都是配置相关的文件，一般不需要修改ext/ ???????????????????????????# Ext JS SDK的一份copy，所以才会这么大index.html ?????????????????????# 首页app.json ???????????????????????# 项目主配置文件app.js ?????????????????????????# 项目主程序app/ ???????????????????????????# 项目源码目录 ???model/ ?????????????????????# Model目录 ???store/ ?????????????????????# Store目录 ???view/ ??????????????????????# View目录 ???????main/ ??????????????????# 首页的目录 ???????????Main.js ????????????# 首页的View ???????????MainModel.js ???????# 首页的ViewModel ???????????MainController.js ??# 首页的ViewController ???Application.js ?????????????# Ext.Applicationpackages/ ??????????????????????# Sencha Cmd packagesworkspace.json ?????????????????# Workspace的描述文件build/ ?????????????????????????# 保存项目最终的build结果

还有一些目录和文件没有列举出来，那些目录和文件一般都不需要我们去修改，前期可以忽略。
对我们来说，最重要的目录就是app目录，这是项目的源码目录，我们写的代码都保存在里面。
app目录下包含三个子目录：

• model: 保存Model对象，Cmd也提供了命令来创建Ext JS中的Model对象。比如User，它包含id，name，email三个字段。在命令行中运行：

cd D:\TutorialAppsencha generate model user.User id:int,name,email

运行Cmd的命令需要先进入项目目录，运行之后会看到model目录里多了一个子目录user，user目录里有新建的User.js文件。

app/ ?????????????????????????# 项目源码目录 ???model/ ?????????????????????# Model目录 ???????user/ ??????????????????# user子目录 ???????????User.js ????????????# User.js定义了User的字段

关于Ext JS的Model的具体用法，请参照官方API文档：Ext.data.Model

• store: Ext JS的Store可以理解为Model对应的数据集合，在Store中可以定义怎么去读取Model。具体用法，请参照官方API文档：Ext.data.Store
• view：所有和UI相关的代码都保存在这里，比如窗口，表格，图表等。可以为每个UI创建对应的ViewController(Ext.app.ViewController)和ViewModel(Ext.app.ViewModel)。

由于这个示例程序要演示的是创建一个登录窗口，只有等登录完成之后才会显示首页。所以首先要打开项目根目录下的app.js，将和TutorialApp.view.main.Main相关的代码删除。修改后的app.js长这样：

Ext.application({ ???name: ‘TutorialApp‘, ???extend: ‘TutorialApp.Application});

如果你仍然保持sencha app watch的运行状态，则Cmd会检测到你对app.js的修改。此时访问首页，就会看到一片空白。

接着来创建用户的登录窗口，它是长这样子的：

可以在app\view目录里手动创建login子目录，并在login目录下手动创建Login.js和LoginController.js。也可以在命令行中运行以下命令来让Cmd自动创建：

cd D:\TutorialAppsencha generate view -base Ext.window.Window login.Login

-base参数用来设置创建的UI是哪种类型，由于我们要创建的是窗口，所以继承的是Ext.window.Window。

Login.js是登录窗口的代码，最后长这样：

Ext.define(‘TutorialApp.view.login.Login‘, { ???extend: ‘Ext.window.Window‘, ???xtype: ‘login‘, ???//Login窗口会包含一个表单(Ext.form.Panel) ???//LoginController里定义了Login窗口会使用到的方法onLoginClick ???//requires可以确保这2个类会在Login初始化完成之前先被初始化 ???requires: [ ???????‘TutorialApp.view.login.LoginController‘, ???????‘Ext.form.Panel‘ ???], ???//绑定controller，绑定时使用的是别名 ???controller: ‘login‘, ???//padding: 10px ???bodyPadding: 10, ???//窗口的标题栏文字 ???title: ‘Login Window‘, ???//隐藏窗口右上角的关闭按钮"x" ???closable: false, ???//Window的autoShow默认为false ???//Window可以用show()和hide()来手动显示和隐藏 ???//把autoShow设为true, 则在Window创建之后会自动显示 ???autoShow: true, ???//把窗口里的UI组件放在items里 ???items: { ???????//表单 ???????xtype: ‘form‘, ???????reference: ‘form‘, ???????//把表单里的UI组件放在表单的items里 ???????items: [{ ???????????//供用户输入用户名的文本框 ???????????xtype: ‘textfield‘, ???????????name: ‘username‘, ???????????//fieldLabel是显示在文本框前的标签文字 ???????????fieldLabel: ‘Username‘, ???????????//打开非空校验，即要求输入的用户名不能为空 ???????????allowBlank: false ???????}, { ???????????//供用户输入密码的文本框 ???????????xtype: ‘textfield‘, ???????????name: ‘password‘, ???????????//inputType设为password，则用户输入的内容会以*回显在屏幕上 ???????????inputType: ‘password‘, ???????????fieldLabel: ‘Password‘, ???????????allowBlank: false ???????}, { ???????????//显示在密码输入框下方的文字 ???????????xtype: ‘displayfield‘, ???????????hideEmptyLabel: false, ???????????value: ‘Enter any non-blank password‘ ???????}], ???????//表单的按钮 ???????buttons: [{ ???????????//按钮上的显示文字 ???????????text: ‘Login‘, ???????????//设为true，则Login按钮在表单通过校验前是不能被点击的 ???????????formBind: true, ???????????listeners: { ???????????????//当按钮被点击时 ???????????????click: ‘onLoginClick‘ ???????????} ???????}] ???}});

LoginController.js是Login的Controller，最后长这样：

Ext.define(‘TutorialApp.view.login.LoginController‘, { ???extend: ‘Ext.app.ViewController‘, ???//定义别名为login ???alias: ‘controller.login‘, ???//当Login按钮被点击时 ???onLoginClick: function() { ???????//这本例中使用localStorage来保存用户的登录状态 ???????//这里省略了用户信息的远程校验过程 ???????//只要用户输入用户名和密码，点击Login按钮即认为用户成功登陆 ???????localStorage.setItem("TutorialLoggedIn", true); ???????//getView()返回的是controller绑定的view, 在本例中就是Login窗口 ???????//登录后不再需要Login窗口，所以调用destroy()来删除 ???????this.getView().destroy(); ???????//关闭Login窗口后，需要显示首页 ???????//使用Ext.create()来创建view\main\Main.js ???????Ext.create({ ???????????xtype: ‘app-main‘ ???????}); ???}});

登录窗口写好了，但还不会显示，需要修改app\Application.js。
Application.js最后长这样：

Ext.define(‘TutorialApp.Application‘, { ???extend: ‘Ext.app.Application‘, ???????name: ‘TutorialApp‘, ???stores: [ ???????// TODO: add global / shared stores here ???], ???views: [ ???????‘TutorialApp.view.login.Login‘, ???????‘TutorialApp.view.main.Main‘ ???], ???????launch: function () { ???????var loggedIn; ???????//从localStorage读取用户登录状态 ???????loggedIn = localStorage.getItem("TutorialLoggedIn"); ???????//如果用户已登录，则显示首页，否则显示Login窗口 ???????Ext.create({ ???????????xtype: loggedIn ? ‘app-main‘ : ‘login‘ ???????}); ???}, ???onAppUpdate: function () { ???????Ext.Msg.confirm(‘Application Update‘, ‘This application has an update, reload?‘, ???????????function (choice) { ???????????????if (choice === ‘yes‘) { ???????????????????window.location.reload(); ???????????????} ???????????} ???????); ???}});

最后在首页上加上一个Logout按钮，修改后的app\main\Main.js长这样：

Ext.define(‘TutorialApp.view.main.Main‘, { ???extend: ‘Ext.tab.Panel‘, ???xtype: ‘app-main‘, ???requires: [ ???????‘Ext.plugin.Viewport‘, ???????‘Ext.window.MessageBox‘, ???????‘TutorialApp.view.main.MainController‘, ???????‘TutorialApp.view.main.MainModel‘, ???????‘TutorialApp.view.main.List‘ ???], ???controller: ‘main‘, ???viewModel: ‘main‘, ???plugins: ‘viewport‘, ???ui: ‘navigation‘, ???tabBarHeaderPosition: 1, ???titleRotation: 0, ???tabRotation: 0, ???header: { ???????layout: { ???????????align: ‘stretchmax‘ ???????}, ???????title: { ???????????bind: { ???????????????text: ‘{name}‘ ???????????}, ???????????flex: 0 ???????}, ???????iconCls: ‘fa-th-list‘, ???????//添加Logout按钮 ???????items: [{ ???????????xtype: ‘button‘, ???????????text: ‘Logout‘, ???????????margin: ‘10 0‘, ???????????handler: ‘onClickButton‘ ???????}] ???}, ???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‘, ???????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}‘ ???????} ???}]});

在首页的对应的Controller，app\main\MainController.js中添加Logout对应的click方法

Ext.define(‘TutorialApp.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‘) { ???????????// ???????} ???}, ???//点击Logout按钮 ???onClickButton: function () { ???????//删除保存在localStorage中的登录状态 ???????localStorage.removeItem(‘TutorialLoggedIn‘); ???????//删除首页 ???????this.getView().destroy(); ???????//创建Login窗口 ???????Ext.create({ ???????????xtype: ‘login‘ ???????}); ???}});

写代码到此就完成了，运行sencha app build命令

cd D:\TutorialAppsencha app build

运行结束后，在build目录下会生成production子目录，可以把该目录下的TutorialApp目录发布到其他服务器上，比如Apache HTTP Server的htdocs目录里。