使用Sencha cmd操作ExtJS 6

栏目: JavaScript · 发布时间: 5年前

内容简介:sencha cmd是用来创建,构建ExtJS 程序的工具。准备您需要安装好sencha cmd命令行工具。

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Art and Science of Java

The Art and Science of Java

Eric Roberts / Addison-Wesley / 2007-3-1 / USD 121.60

In The Art and Science of Java, Stanford professor and well-known leader in CS Education Eric Roberts emphasizes the student-friendly exposition that led to the success of The Art and Science of C. By......一起来看看 《The Art and Science of Java》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换