Ext JS 4.2.1 部署

Question

Ext JS 4.2.1 部署

extjsextjs4.2

4

我是Ext JS的新手。

我有以下内容：

Sencha Cmd 4.0.0.203

Extjs 4.2.1.883

SenchaSDKTools-2.0.0-beta3

Ruby193

我在这里阅读了hello world示例的Ext JS文档：
http://docs.sencha.com/extjs/4.2.1/#!/guide/getting_started

因此，我在Tomcat的webapp中创建了一个名为helloext的文件夹，在其中放置了ext-4.2.1.883的内容，并在该文件夹旁边放置了一个名为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类。它是所有类 + 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>

并且可以使用以下URL访问它:

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

我在 Firefox 和 Chrome 的控制台中只看到这个错误信息？

Firefox：

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

Chrome:

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)

那么我在部署方面做错了什么？

非常感谢您的帮助。

- Masoud Ahadi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lorenz Meyer · Accepted Answer

不要使用jsb3方式。这是在extjs 3.x中完成任务的方法。使用Sencha cmd工具创建标准应用程序，它将作为您开发的起点。使用以下命令：

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

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

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

作为另一种选择，如果您想创建多个应用程序，则首先需要创建一个工作区，然后在第二步中生成您的应用程序。

创建完您的应用程序后，您可以运行sencha app build来创建生产文件。您可以根据需要重复此操作多次。

请参阅Sencha cmd文档。最好的文档是通过sencha help和sencha help generate等命令获得的命令行文档。