PDA

View Full Version : Difficulty with fresh install and "Hello World" sample application



Eric.Sencha
21 Dec 2011, 7:29 AM
Hello,

I just installed ExtJS 4.0 and Apache running on localhost and i am having issues getting the "Hello World" sample application to run. I am running the latest version of Firefox (v9.0.1).

I have index.html and app.js in a folder named "app" under htdocs
and "extjs" folder under both "htdocs" and "app"

Error: <a href="#!/api/Ext-method-application" rel="Ext-method-application" class="docClass">Ext.application</a> is not a function
Source File: http://localhost/app/app.js
Line: 3

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-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js:
<a href="#!/api/Ext-method-application" rel="Ext-method-application" class="docClass">Ext.application</a>({
name: 'HelloExt',
launch: function() {
<a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.container.Viewport" rel="Ext.container.Viewport" class="docClass">Ext.container.Viewport</a>', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});

I have looked at the firefox errors (listed above) and went through the apache logs (the files are returned with "200") - any other suggestions on how to debug?

127.0.0.1 - - [21/Dec/2011:10:16:57 -0500] "GET /app/ HTTP/1.1" 200 298
127.0.0.1 - - [21/Dec/2011:10:16:57 -0500] "GET /app/extjs/resources/css/ext-all.css HTTP/1.1" 200 229600
127.0.0.1 - - [21/Dec/2011:10:16:57 -0500] "GET /app/app.js HTTP/1.1" 200 599
127.0.0.1 - - [21/Dec/2011:10:16:57 -0500] "GET /app/extjs/ext-all-debug.js HTTP/1.1" 200 2420838

mitchellsimoens
21 Dec 2011, 8:44 AM
You should use ext-debug.js not ext-all-debug.js

It looks like app.js is loading before ext-all-debug.js

Eric.Sencha
22 Dec 2011, 6:51 AM
Thanks for your help Mitchell,

I have changed "ext-all-debug.js" back to "ext-debug.js". I believe i changed that when i was trying to figure out my issue.

How do i make "ext-debug.js" load before "app.js"?

I thought it was the order they were listed in the html file, however i have them listed exactly like the example with "ext-debug.js" first?
(example at: http://www.sencha.com/learn/getting-started-with-ext-js-4/)

Thanks

Erich Klaus

GirishDhameja13
27 Dec 2011, 11:17 AM
Remove those <a> tags. Arguably, Sencha should go over the documentation and remove those pesky html tags in the code part.

mitchellsimoens
27 Dec 2011, 11:20 AM
Saw these in the learn section. Already sent this up internally to fix that.

Eric.Sencha
27 Dec 2011, 11:42 AM
Thanks GirishDhameja13,

I have confirmed that the extra HTML tags listed in the example code were the issue (peachiness has been achieved). It would be obvious - but this was my first foray into ExtJS in some time - and i didn't recognize the syntax yet.

As for the first example of how to use ExtJS - that really should probably be fixed. Thanks to Mitchell Simoens for notifying the ExtJS folks on this issue so that others don't get tripped up on their first touch and foray into ExtJS :)

Erich