1、安装
Download and install this software:
- 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.
2、创建项目
下载sencha extjs 5.1,然后进去到该sdk目录下面，输入:
sencha generate app hello hello
这个时候会看到一个hello目录，就是我们的app目录。
必须要在sdk目录下面才能运行
sencha generate app hello hello
否则会报错，错误如下：
当然你可以使用-sdk-path参数来指定sdk路径。
3、编译项目
进入到hello目录下面,build编译的三种形式：production,testing,package
testing:构建一个处于测试阶段的应用程序，所有javascript脚本文件都被原样复制到应用程序中，不对这些脚本文件进行压缩，便于开发者对其进行调试。
package:构建一个本地可运行的应用程序，开发者可以不使用web服务器，而是从文件系统中直接打开该应用程序。
production:构建一个需要使用Web服务器来运行的应用程序，支持使用各种设备来访问该应用程序，同时该应用程序也是一个可离线使用的应用程序。
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
4、浏览器访问
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、文件
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>', 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' } ] }