我是 Ext JS 新手。 我有:
Sencha Cmd 4.0.0.203
Extjs 4.2.1.883
SenchaSDKTools-2.0.0-beta3
ruby 193
我在指南页面阅读了 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>
所以我的包装结构是:
- 你好ext
- 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: This file contains all of your application's classes. It is not minified so is very useful for debugging problems with your built application. In our example this file is empty because our "Hello Ext" application does not contain any classes.
app-all.js: This file is a minimized build of your application plus all of the Ext JS classes required to run it. It is the minified and production-ready version of 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>
并使用以下 URL 访问它:
http://localhost:8080/helloext/index-prod.html
我在控制台中除了 Firefox 和 Chrome 的错误之外什么也没得到？？？
火狐浏览器:
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)
那么我的部署有什么问题吗？
感谢您帮助我。
最佳答案
不要使用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 来创建生产文件。您可以根据需要重复此操作多次。
看看doc for Sencha cmd 。最好的文档是通过 sencha help 和 sencha help generated 等在命令行获得的文档。
关于extjs - Ext JS 4.2.1 部署，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19539199/