Question

我是Ext JS的新手。我有：

Sencha Cmd 4.0.0.203

Extjs 4.2.1.883

SenchaSDKTools-2.0.0-β3

Ruby193

我在指南页面上阅读了Ext JS文档，这里是hello world示例：
http://docs.sencha.com/extjs/4.2.1/#!/guide/getting_started

所以我在我的Tomcat的webapp中创建了一个带有 helloext 名称的文件夹，并将ext-4.2.1.883内容放在其中的 extjs 和 app.js中此文件夹旁边的文件包含以下内容：

Ext.require('Ext.container.Viewport');
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});

最后，我使用以下内容创建了 index.html ：

<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

所以我的包装结构是：

helloext
- app.js
- 的index.html
- ExtJS的（文件夹）

extjs （文件夹）包含所有ext-4.2.1.883内容。

当我在浏览器地址栏中输入此地址http://localhost:8080/helloext/index.html时，一切正常。

执行以下命令时：

sencha create jsb -a index.html -p app.jsb3
sencha build -p app.jsb3 -d .

我收到的消息似乎一切正常并完成了！

D:\application server\apache-tomcat-7.0.41\webapps\helloext>
sencha create jsb -a index.html -p app.jsb3

D:\application server\apache-tomcat-7.0.41\webapps\helloext>
sencha build -p app. jsb3 -d .
Loading the Project Name Project
Loaded 0 Packages
Loaded 2 Builds
* Parse all-classes.js with options:
- debug: true
- debugLevel: 1
* Parse app-all.js with options:
- debug: false
- debugLevel: 1
* Compress and obfuscate app-all.js...
Copy resources...
Done building!
D:\application server\apache-tomcat-7.0.41\webapps\helloext>

第一个命令创建一个jsb3文件，第二个命令创建两个文件：

all-classes.js
and 
app-all.js

该文件说：

all-classes.js：此文件包含所有应用程序的类。   它没有缩小，因此对于调试问题非常有用   建立申请。在我们的示例中，此文件为空，因为我们的   “Hello Ext”应用程序不包含任何类。

app-all.js：此文件是应用程序的最小化版本   运行它所需的所有Ext JS类。它是缩小的   生产就绪版本的all-classes.js + app.js。

我检查了这个文件大小：
all-classes.js大小是2.39 MB app-all.js大小为500 KB。

我使用以下内容创建了index-prod.html文件：

<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

并使用以下网址访问它：

http://localhost:8080/helloext/index-prod.html

我在控制台中使用Firefox和Chrome时出现此错误???

火狐：

TypeError: Ext.cmd is undefined
TypeError: Ext.EventManager is undefined

铬：

Uncaught TypeError: Cannot call method 'derive' of undefined 
(anonymous function)

Uncaught TypeError: Cannot call method 'onWindowResize' of undefined app-all.js:4
Ext.define.constructor app-all.js:4
i ext.js:21
(anonymous function) app-all.js:4
Ext.ClassManager.processCreate ext.js:21
Ext.ClassManager.processCreate ext.js:21
(anonymous function) ext.js:21
Ext.apply.onBeforeCreated ext.js:21
Ext.apply.doProcess ext.js:21
Ext.apply.process ext.js:21
Ext.Class.c ext.js:21
Ext.ClassManager.create ext.js:21
Ext.apply.define ext.js:21
(anonymous function)

那么在部署方面我的错误是什么？

感谢你帮助我。

Answer 1

不要使用jsb3方式。这就是使用extjs 3.x完成任务的方式。

使用Sencha cmd工具创建标准应用程序，该应用程序将作为您开发的起点。使用以下命令：

sencha -s [path to sdk] generate app [AppName] [folder]

此命令必须在您要创建应用程序的目录中运行。比如，你想在MyApp中创建一个名为C:\htdocs\myapp的应用程序（该目录不应该存在或者至少应该为空），你必须运行以下命令：

> C:
> cd htdocs
> sencha -s [path to sdk] generate app MyApp myapp

作为替代方案，如果您要创建多个应用，则首先创建一个工作区，然后在第二步中生成应用。

创建应用后，您可以运行sencha app build来创建生产文件。你可以多次重复这个。

查看doc for Sencha cmd。最佳文档是使用sencha help和sencha help generate等获得的命令行中的文档。

Ext JS 4.2.1部署

1 个答案: