Sencha Cmd

时间 2019-11-12

标签 sencha cmd 繁體版

原文原文链接

一、安装

Download and install this software:javascript

JRE Sencha Cmd requires Java Runtime Environment version 1.7 to support all functionality, however, most features will work with 1.6 (the minimum supported version).
Sencha Cmd
Ruby Ruby differs by OS:
Windows: Download Ruby from rubyinstaller.org. Get the ".exe" file version of the software and install it.

二、建立项目

下载sencha extjs 5.1,而后进去到该sdk目录下面，输入:css

sencha generate app hello hello

这个时候会看到一个hello目录，就是咱们的app目录。html

必需要在sdk目录下面才能运行java

sencha generate app hello hello

不然会报错，错误以下：web

固然你可使用-sdk-path参数来指定sdk路径。ajax

三、编译项目

进入到hello目录下面,build编译的三种形式：production,testing,packagechrome

testing:构建一个处于测试阶段的应用程序，全部javascript脚本文件都被原样复制到应用程序中，不对这些脚本文件进行压缩，便于开发者对其进行调试。apache

package:构建一个本地可运行的应用程序，开发者能够不使用web服务器，而是从文件系统中直接打开该应用程序。json

production:构建一个须要使用Web服务器来运行的应用程序，支持使用各类设备来访问该应用程序，同时该应用程序也是一个可离线使用的应用程序。bootstrap

native: 首先构建一个能够在文件系统中直接打开的应用程序，而后将其打包成一个能够在本机的Web服务器中运行的应用程序。

3.1 production

sencha app build production //打包手机端，电脑端都能用的形式

生成以后，在sdk的build目录下面会出现一个production目录，里面有一个hello目录，里面的内容已经被大部分压缩过了。

sencha app build testing  //打包测试版

sencha app build package  //打包到手机端

sencha package run package.json //主要是生成Android或iphone的APK

sencha app build -e native

四、浏览器访问

cd hello
sencha app watch

这样会启动一个1841端口的http服务。

Sencha Cmd is now monitoring your application for changes. You will see “Waiting for changes…”, which is an indication that your application is up to date. As you make changes and save files you will see other messages printing, but these will end shortly with another “Waiting for changes…” message. This cycle usually takes a few seconds, so be sure to allow enough time between file saves and hitting Reload in your browser.

若是经过apache来提供http服务，apache的根目录必须设置为sdk目录，否则会出现问题。本人开始的时候设置的地址为hello的根目录，而后在chrome调试的时候发现出现访问sdk/packages目录下面的资源，而后就开始报错。

这样一个骨架基本上就差很少了。

五、文件

5.1 index.html

该文件异常的简单，全部的东西都已经被封装过了。

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">

    <title>hello</title>

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" type="text/javascript" src="bootstrap.js"></script>

</head>
<body></body>
</html>

5.2 bootstrap.js

var Ext = Ext || {};
Ext.manifest = Ext.manifest || "bootstrap.json";

5.2.1 Ext.Microloader.run()

            run: function() {
                Microloader.init();
                var manifest = Ext.manifest;

                if (typeof manifest === "string") {
                    var extension = ".json",
                        url = manifest.indexOf(extension) === manifest.length - extension.length
                            ? manifest
                            : manifest + ".json";

                    Boot.fetch(url, function(result){
                        manifest = Ext.manifest = JSON.parse(result.content);
                        Microloader.load(manifest);
                    });
                } else {
                    Microloader.load(manifest);
                }
            },

经过对代码的分析，先执行了一个初始化函数，而后检测Ext.manifest的一些规范，而后经过Boot.fetch去从服务器端把该文件拿下来，并经过json解析，丢给Microloader.load函数。

//初始化函数
            init: function () {
                Microloader.initPlatformTags();
                var readyHandler = Ext._beforereadyhandler;
                Ext._beforereadyhandler = function () {
                    if (Ext.Boot !== Boot) {
                        Ext.apply(Ext.Boot, Boot);
                        Ext.Boot = Boot;
                    }
                    if(readyHandler) {
                        readyHandler();
                    }
                };
            },

Boot.fetch应该是执行了一个ajax请求。

//Boot.fetch
            fetch: function(url, complete, scope, async) {
                async = (async === undefined) ? !!complete : async;

                var xhr = new XMLHttpRequest(),
                    result, status, content, exception = false,
                    readyStateChange = function () {
                        if (xhr && xhr.readyState == 4) {
                            status = (xhr.status === 1223) ? 204 :
                                (xhr.status === 0 && ((self.location || {}).protocol === 'file:' ||
                                    (self.location || {}).protocol === 'ionp:')) ? 200 : xhr.status;
                            content = xhr.responseText;
                            result = {
                                content: content,
                                status: status,
                                exception: exception
                            };
                            if (complete) {
                                complete.call(scope, result);
                            }
                            xhr = null;
                        }
                    };

                if (async) {
                    xhr.onreadystatechange = readyStateChange;
                }

                try {
                    _debug("fetching " + url + " " + (async ? "async" : "sync"));
                    xhr.open('GET', url, async);
                    xhr.send(null);
                } catch (err) {
                    exception = err;
                    readyStateChange();
                    return result;
                }

                if (!async) {
                    readyStateChange();
                }

                return result;
            },

5.2.2 bootstrap.json

该文件定义了一些路径以及类属性。

"paths": {
        "Ext": "../src",
        "Ext.AbstractManager": "../packages/sencha-core/src/AbstractManager.js",
        "Ext.Ajax": "../packages/sencha-core/src/Ajax.js",
        "Ext.AnimationQueue": "../packages/sencha-core/src/AnimationQueue.js",
        "Ext.Array": "../packages/sencha-core/src/lang/Array.js",
        "Ext.Assert": "../packages/sencha-core/src/lang/Assert.js",
        "Ext.Base": "../packages/sencha-core/src/class/Base.js",
        "Ext.Boot": ".sencha/app/Boot.js",
        "Ext.Class": "../packages/sencha-core/src/class/Class.js",
        "Ext.ClassManager": "../packages/sencha-core/src/class/ClassManager.js",
        "Ext.ComponentManager": "../packages/sencha-core/src/ComponentManager.js",
        "Ext.ComponentQuery": "../packages/sencha-core/src/ComponentQuery.js",
        "Ext.Config": "../packages/sencha-core/src/class/Config.js",
        "Ext.Configurator": "../packages/sencha-core/src/class/Configurator.js",
        "Ext.Date": "../packages/sencha-core/src/lang/Date.js",
        "Ext.Error": "../packages/sencha-core/src/lang/Error.js",
        "Ext.Evented": "../packages/sencha-core/src/Evented.js",
        "Ext.Factory": "../packages/sencha-core/src/mixin/Factoryable.js",
        "Ext.Function": "../packages/sencha-core/src/lang/Function.js",
        "Ext.GlobalEvents": "../packages/sencha-core/src/GlobalEvents.js",
        "Ext.Inventory": "../packages/sencha-core/src/class/Inventory.js",
        "Ext.JSON": "../packages/sencha-core/src/JSON.js",
        "Ext.Loader": "../packages/sencha-core/src/class/Loader.js",
        "Ext.Mixin": "../packages/sencha-core/src/class/Mixin.js",
        "Ext.Msg": "../src/window/MessageBox.js",
        "Ext.Number": "../packages/sencha-core/src/lang/Number.js",
        "Ext.Object": "../packages/sencha-core/src/lang/Object.js",
        "Ext.Script": "../packages/sencha-core/src/class/Inventory.js",
        "Ext.String": "../packages/sencha-core/src/lang/String.js",
        "Ext.String.format": "../packages/sencha-core/src/Template.js",
        "Ext.TaskQueue": "../packages/sencha-core/src/TaskQueue.js",
        "Ext.Template": "../packages/sencha-core/src/Template.js",
        "Ext.Util": "../packages/sencha-core/src/Util.js",
        "Ext.Version": "../packages/sencha-core/src/util/Version.js",
        "Ext.Widget": "../packages/sencha-core/src/Widget.js",
        "Ext.XTemplate": "../packages/sencha-core/src/XTemplate.js",
        "Ext.app": "../packages/sencha-core/src/app",
        "Ext.app.bindinspector": "../src/app/bindinspector",
        "Ext.browser": "../packages/sencha-core/src/env/Browser.js",
        "Ext.class": "../packages/sencha-core/src/class",
        "Ext.data": "../packages/sencha-core/src/data",
        "Ext.direct": "../packages/sencha-core/src/direct",
        "Ext.dom": "../packages/sencha-core/src/dom",
        "Ext.dom.ButtonElement": "../src/dom/ButtonElement.js",
        "Ext.dom.Layer": "../src/dom/Layer.js",
        "Ext.env": "../packages/sencha-core/src/env",
        "Ext.event": "../packages/sencha-core/src/event",
        "Ext.event.publisher.MouseEnterLeave": "../src/event/publisher/MouseEnterLeave.js",
        "Ext.feature": "../packages/sencha-core/src/env/Feature.js",
        "Ext.fx.Animation": "../packages/sencha-core/src/fx/Animation.js",
        "Ext.fx.Runner": "../packages/sencha-core/src/fx/Runner.js",
        "Ext.fx.State": "../packages/sencha-core/src/fx/State.js",
        "Ext.fx.animation": "../packages/sencha-core/src/fx/animation",
        "Ext.fx.easing": "../packages/sencha-core/src/fx/easing",
        "Ext.fx.layout": "../packages/sencha-core/src/fx/layout",
        "Ext.fx.runner": "../packages/sencha-core/src/fx/runner",
        "Ext.lang": "../packages/sencha-core/src/lang",
        "Ext.mixin": "../packages/sencha-core/src/mixin",
        "Ext.os": "../packages/sencha-core/src/env/OS.js",
        "Ext.overrides": "../overrides",
        "Ext.overrides.util.Positionable": "../overrides/Positionable.js",
        "Ext.perf": "../packages/sencha-core/src/perf",
        "Ext.plugin.Abstract": "../packages/sencha-core/src/plugin/Abstract.js",
        "Ext.scroll": "../packages/sencha-core/src/scroll",
        "Ext.supports": "../packages/sencha-core/src/env/Feature.js",
        "Ext.util": "../packages/sencha-core/src/util",
        "Ext.util.Animate": "../src/util/Animate.js",
        "Ext.util.CSS": "../src/util/CSS.js",
        "Ext.util.ClickRepeater": "../src/util/ClickRepeater.js",
        "Ext.util.ComponentDragger": "../src/util/ComponentDragger.js",
        "Ext.util.Cookies": "../src/util/Cookies.js",
        "Ext.util.ElementContainer": "../src/util/ElementContainer.js",
        "Ext.util.Floating": "../src/util/Floating.js",
        "Ext.util.Focusable": "../src/util/Focusable.js",
        "Ext.util.FocusableContainer": "../src/util/FocusableContainer.js",
        "Ext.util.Format.format": "../packages/sencha-core/src/Template.js",
        "Ext.util.KeyMap": "../src/util/KeyMap.js",
        "Ext.util.KeyNav": "../src/util/KeyNav.js",
        "Ext.util.Memento": "../src/util/Memento.js",
        "Ext.util.ProtoElement": "../src/util/ProtoElement.js",
        "Ext.util.Queue": "../src/util/Queue.js",
        "Ext.util.Renderable": "../src/util/Renderable.js",
        "Ext.util.StoreHolder": "../src/util/StoreHolder.js",
        "ExtThemeNeptune": "../packages/ext-theme-neptune/overrides",
        "hello": "app"
    },

5.2.3 app.json

该文件主要是用于一些程序的配置，例如theme等等。

5.2.4 app/view/main/Main.js

Let’s go ahead and add another item to the items array. Here is a new component with a north region. We’ve added a height of 40px, 10px of padding, and the text: ‘My Company - My Company Motto’:

{
    region: 'north',
    xtype: 'component',
    cls: 'appBanner',
    padding: 10,
    height: 40,
    html: 'My Company - My Company Motto'
}

region表示位置，xtype表示使用的widget组件，cls表示css

{
    xtype: 'panel',
    title: 'Navigation',
    region: 'west',
    html: '<ul><li>This area...</li></ul>',
    width: 250,
    split: true,
    collapsible: true,
    collapsed：true,

    tbar: [{
        text: 'Button',
        handler: 'onClickButton'
    }]
}

collapsible表示是否可折叠，split表示是否切分,collapsed表示默认是否折叠。

bind: {
            title: '{name}'
        },

bind表示是否绑定变量。

5.2.5 添加一个grid tab

{
            title: 'The Data',
            layout: 'fit',
            items: [{
                xtype: 'grid',
                title: 'Simpsons',
                store: {
                    fields:['name', 'email', 'phone'],
                    data:[
                        { name: 'Lisa',  email: "lisa@simpsons.com",phone: "555-111-1224"  },
                        { name: 'Bart',  email: "bart@simpsons.com",phone: "555-222-1234" },
                        { name: 'Homer', email: "home@simpsons.com",phone: "555-222-1244"  },
                        { name: 'Marge', email: "marge@simpsons.com",phone: "555-222-1254"  }
                    ],
                    proxy: {
                        type: 'memory'
                    }
                },
                columns: [
                    { text: 'Name',  dataIndex: 'name' },
                    { text: 'Email', dataIndex: 'email', flex: 1},
                    { text: 'Phone', dataIndex: 'phone' }
                ]
            }