Geek Answers Handbook

Sencha ExtJS 4 - Key Welcome Demos

A look in ExtJS 4 and I'm trying to make a Hello World tutorial here: http://www.sencha.com/learn/getting-started-with-ext-js-4/

I have all my file settings as recommended in the tutorial:

enter image description here

But I keep getting an error due to the funky syntax that runs their file:

enter image description here

I do not use jQuery or any other libraries, since Sencha should be a complete javascript environment.

Here is the complete code:

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.' } ] }); } });

index.html

 <!doctype 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>

Any ideas on what could be the culprit?

+7
source share
3 answers

You should not have HTML in the JS file. The code in the textbook is screwed. These anchor href tags are links to ExtJS API documentation that are somehow embedded in the sample code.

The actual code should be:

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

I posted an error report here: http://www.sencha.com/forum/showthread.php?175129-Documentation-Getting-Started-with-Ext-JS-4.0&p=717098#post717098

Added January 21, 2012: apparently, the correct version of this tutorial is available at: http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started

+6
source

You need to update "app.js" (cut html tags):

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

The Javascript parser does not understand that you copied the html tags when creating the "app.js" file.

+2
source

This is the minimum HTML page to run ExtJS 4 without MVC:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link href="/ext/4.0.0/resources/css/ext-all.css" rel="stylesheet" /> <script src="/ext/4.0.0/ext-all.js"></script> </head> <body> <script> Ext.onReady(function() { Ext.Msg.alert('Welcome', 'Hello, World!'); }); </script> </body> </html>

And this one with MVC:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link href="/ext/4.0.7/resources/css/ext-all.css" rel="stylesheet" /> <script src="/ext/4.0.7/ext-all.js"></script> <script src="/app.js"></script> </head> <body></body> </html>

Code app.js:

 Ext.application({ name: 'HelloWorld', launch: function () { Ext.Msg.alert('Welcome', 'Hello, World!'); } });

More details in my online demos:

ExtJS 4 Hello World App

ExtJS 4 "Hello World" application using an external loader

ExtJS 4 MVC Hello World Application

0
source

More articles:


All Articles