I'm new to Ext JS. I have:
Sencha Cmd 4.0.0.203
Extjs 4.2.1.883
SenchaSDKTools-2.0.0-beta3
Ruby193
I read Ext JS documentation at guide page for hello world example here:
http://docs.sencha.com/extjs/4.2.1/#!/guide/getting_started
So I created a folder with helloext name in webapp of my Tomcat and put ext-4.2.1.883 contents in extjs within it and a app.js file beside this folder with this content:
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.'
}
]
});
}
});
Finally I created an index.html with this content:
<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>
So my packaging structure is:
- helloext
- app.js
- index.html
- extjs(folder)
That extjs (folder) contains all of ext-4.2.1.883 contents.
When I enter this address http://localhost:8080/helloext/index.html in browser address bar, everything is ok.
When executing below commands:
sencha create jsb -a index.html -p app.jsb3
sencha build -p app.jsb3 -d .
I got this messages that seems everything is ok and done!
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>
First command create a jsb3 file and second command create two file:
all-classes.js
and
app-all.js
The document says:
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.
I checked this file size:
all-classes.js size is 2.39 MB
app-all.js size is aboub 500 KB.
I created index-prod.html file with this content:
<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>
and access it using this URL:
http://localhost:8080/helloext/index-prod.html
I get nothing but this error with Firefox and Chrome in console???
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)
So what is my wrong in deploying?
I appreciate you helping me.
