jQuery MiniUI,快速开发WebUI界面

使用Sencha cmd操作ExtJS 6

sencha cmd是用来创建,构建ExtJS 程序的工具。

准备
您需要安装好sencha cmd命令行工具。

创建应用程序
sencha cmd创建ExtJS的程序框架

//方法一:创建ExtJS 6 项目
// 打开命令行窗口,window上即cmd.exe
sencha -sdk /path/to/ext6 generate app MyApp /path/to/my-app

/path/to/ext6 是ext6 路径

MyApp 是项目名

/path/to/my-app 复制到哪里去

sencha -sdk G:\file\ext-6.2.0 generate app demo1 G:\file\senchacmd-64bit\object

如果没有指定sdk,则需要进入sdk目录后才能创建成功

//方法二:创建ExtJS 6 项目
//进入sdk目录
cd /path/to/ext6
sencha generate app MyApp /path/to/my-app

创建的应用程序目录文件如下

.sencha/                        # Sencha-specific files (primarily configuration)
    app/                        # Application-specific content
        sencha.cfg              # Application configuration file for Sencha Cmd
        Boot.js                 # Private, low-level dynamic loader for JS and CSS
        Microloader.js          # Loads app based on app.json content
        build-impl.xml          # Standard application build script
        *-impl.xml              # Implementations of various build phases
        defaults.properties     # Default values and docs for build properties
        ext.properties          # Build property values specific to Ext JS
        *.defaults.properties   # Build properties by environment (e.g. "testing")
        plugin.xml              # Application-level plugin for Sencha Cmd
        codegen.json            # Data for merging generated code during upgrade
    workspace/                  # Workspace-specific content (see below)
        sencha.cfg              # Workspace configuration file for Sencha Cmd
        plugin.xml              # Workspace-level plugin for Sencha Cmd
 
ext/                            # Ext JS SDK副本
    cmd/                        # Framework-specific content for Sencha Cmd
        sencha.cfg              # Framework configuration file for Sencha Cmd
    classic/                    # Packages related to the Classic Toolkit
        classic/                # Ext JS Classic Toolkit package
        theme-neptune/          # Classic Toolkit Theme Package for Neptune
        theme-triton/           # Classic Toolkit Theme Package for Triton
        ...
    modern/                     # Packages related to the Modern Toolkit
        modern/                 # Ext JS Modern Toolkit package
        theme-neptune/          # Modern Toolkit Theme Package for Neptune
        theme-triton/           # Modern Toolkit Theme Package for Triton
        ...
    packages/                   # Framework supplied packages
        charts/                 # Charts package
        ux/                     # Contents of "Ext.ux" namespace
    ...
 
index.html                      # 应用程序入口
app.json                        # Application manifest
app.js                          # Application入口类
app/                            # MVC模式的应用程序代码,你的代码大多写在这个目录下
    model/                      # 模型
    store/                      # store
    view/                       # 视图
        main/                   # Folder for the classes implementing the Main View
            Main.js             # The Main View
            MainModel.js        # The `Ext.app.ViewModel` 
            MainController.js   # The `Ext.app.ViewController` 
    Application.js              # The `Ext.app.Application` class
 
packages/                       # Sencha Cmd packages
workspace.json                  # 工作空间描述
 
build/                          # 构建输出的目录

构建程序
使用generate指令创建的应用程序大小达到100多M,构建指令会将页面,JS代码,主题构建到build目录下,移除sdk中不必要的文件并进行整合,让最终的包达到5~6M左右。

cd path/to/my-app
sencha app build

发布程序
使用如下指令,即可发布ExtJS 6程序,并在浏览器上查看

cd path/to/my-app
sencha app watch

Ctrl + C即可关闭服务

在浏览器中输入http://localhost:1841/,即可查看

refresh
当修改了样式,主题,本地化配置后,你需要通过refresh来更新程序。

例如修改本地化配置,打开app.json,
在requires处,将本地化配置改为中文

"requires":{
    "font-awesome",
    "ext-locale" //新添加
},
"locale":“zh_CN” //新添加

使用如下指令,才能完成应用程序国际化配置的更新

cd /path/to/my-app
sencha app refresh

生成代码


生成模型
cd /path/to/MyApp
sencha generate model User id:int,name,email
 
//结果是在 app/model目录下产生了User.js,其中定义了User模型类,包含三个属性:id,name,email

生成视图

//生成
cd /path/to/MyApp
sencha generate view foo.Thing

上面指令将生成如下文件

app/
    view/
        foo/                 #
            Thing.js         # View
            ThingModel.js    # Ext.app.ViewModel
            ThingController.js    #Ext.app.ViewController

你还可以为视图指定父类

cp /path/to/MyApp
sencha generate view -base Ext.tab.Panel foo.Thing

生成controller

cd /path/to/MyApp
sencha generate controller Central

查看帮助

sencha help
sencha help generate
sencha help refresh
sencha help app

作者:weixin_41045798
原文:https://blog.csdn.net/weixin_41045798/article/details/82713097