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' }
                ]
            }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。