ExtJS4.2-Sencha Cmd

最新推荐文章于 2019-07-10 19:23:00 发布

熊小楚

最新推荐文章于 2019-07-10 19:23:00 发布

阅读量1.1k

点赞数

分类专栏：网页设计文章标签： extjs4 cmd

本文链接：https://blog.csdn.net/xiongqiaochu/article/details/39205623

版权

网页设计专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、环境要求

Sencha Cmd
Ruby
ExtJS SDK

2、创建Workspace

1）进入自定义的workspace，例如在目录D:\Tomcate\webapps中

cd Tomcate
cd webapps

2）确定ExtJS SDK的位置，例如路径为D:\ExtJS\ext-4.2.1.883

3）在cmd中输入命令：

sencha -sdk D:\ExtJS\ext-4.2.1.883 generate workspace myWorkspace

这样就在D:\Tomcate\webapps下面建立了一个名为myWorkspace的文件夹。

3、创建第一个APP

1）进入myWorkspace

2）在cmd中输入命令：

sencha -sdk ext generate app demo test

demo为build之后APP的name，test为myWorkspace文件下的工程名。

打开test文件夹中的index.html，在浏览器中显示如下：

4、编辑APP——MOC模式

1）进入D:\Tomcate\webapps\myWorkspace\test\app，可以看到有如下结构：

在controller文件夹中自定义一个JS文件，写入自定义的一些函数；

在model文件夹中自定义JS文件，写入工程所用到的一些Models；

在store文件夹中自定义JS文件，写入工程所用到的一些Stores；

在view文件夹中自定义JS文件，写入工程界面主体，例如Component等；

2）当在上述文件夹中自定义添加了js文件之后，需要在Application.js文件中调用他们。

如下所示：

在views文件夹中自定义了一个mainView.js文件，只需要将其加入到views中即可，在最后记得要launch所创建的mainView。

记住，需要将app.js中的autoCreateViewport: true删除。

Ext.define('demo.Application', {
    name: 'demo',

    extend: 'Ext.app.Application',

    views: [
        // TODO: add views here
        'mainView'
    ],

    controllers: [
        // TODO: add controllers here
    ],

    stores: [
        // TODO: add stores here
    ],

    launch: function() {
        Ext.create('demo.view.mainView')
    }
});