Setting up ExtJS for Hello World example

Hey guys,

This is my first post about ExtJS. First of all, I am not an expert in ExtJS. I am just the beginner who spent most of the time with PHP for backend and jQuery for frontend development. Recently I was forced to study ExtJS for a project. I searched on Google for a simple tutorial to study ExtJS quickly, but sadly I found none so simple. I have read many articles on many sites and some PDFs about ExtJS development to summarize the features and components, and that is the reason I am planning to post a series of articles here while I learn it.

What is ExtJS
ExtJS is a javascript framework for building interactive Web Apps.

Why ExtJS??
ExtJS framework contain a large set of inbuilt widgets such as Tabpanel, Form etc which can be inserted to the web page easily. This saves time for developing interactive web application which looks exactly like a desktop app.

Is it the replacement of jQuery ?
No. It is not the replacement of jQuery framework. Since it can be integrated with jQuery there is no need to replace jQuery with ExtJS but it is a very complete library almost every AJAX you can do with jQuery you can do it with ExtJS also.

How much does it costs ?
Ext JS is available for free under the GPLv3 for open source projects, non-profit organizations, and educational use. Also you can also buy the commercial version. But for educational purposes is free you can still follow this tutorial.

Can I see an example of what it looks like ?
Yes, Take a look at this page

I recommend a beginner like me to start with ExtJS version 3 and later switch to version 4.

Goto Sencha website and grab your copy of ExtJs 3 framework

Start the Apache webserver and create a folder “ext” in the www or public_html where ever you save the folder for viewing as http://localhost/ext/

Unzip the downloaded file into the “extjs” folder in “ext” folder and make sure that you can access the file at http://localhost/ext/extjs/ext-all-debug.js

Create an index.html file in “ext” folder and open up index.html on your text editor and add some basic html markup

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ExtJS Samples</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" >
Ext.BLANK_IMAGE_URL = ‘extjs/resources/images/default/s.gif’;
</script>
</head>
<body>
</body>
</html>
[/html]

Now you will be able to access the file at
http://localhost/ext/index.html

Finally, add the javascript tag to the head

[javascript]
<script type="text/javascript">
Ext.onReady(function(){

Ext.Msg.alert("Welcome","Welcome to ExtJS World");

});
</script>
[/javascript]

So the final page will look like this

[html]<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ExtJS Samples</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" >
Ext.BLANK_IMAGE_URL = ‘extjs/resources/images/default/s.gif’;
</script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){

Ext.Msg.alert("Welcome","Welcome to ExtJS World");

});
</script>
</body>
</html>
[/html]

Ok, Save the file and open via browser http://localhost/ext/index.html and you can see the beautiful alert box.

That’s it. You’ve successfully learned how to setup ExtJS and use alert box.

Stay tuned for the next tutorial.


16 thoughts on “Setting up ExtJS for Hello World example

  1. Hi Vivek

    Thanks for such a wonderfull start up information. I am new to ext js but i love this tutorial.

  2. Hi Viveks,

    Thanks for maintaing such useful information for beginners in Ext JS. I am new to Ext JS this information helped me to lot. Once again thanks.

  3. Thanks man
    But why if I run the example on localhost , ext js files not loading successfully which generates this error
    Object doesn’t support this property or method (Ext.onReady() )
    I have used ext js version 3 and explorer 8 and chroom but still same thing
    however if I access directly it will show up

    why !!!!

    1. Nice Blog,
      Thanks for the simple explanation.
      i was searched a lot but not find this simple understandable solution.

  4. Thank you …i was looking for something like this…it is very helpful to understand extjs and first program…keep posting new tutorials on it…keep helping newbie.
    Thanks Abdul Aleem

  5. Thanks Vivek. Nice explanation.

    I’m very new to extjs. Could you please explain me why we use the below code in the very first line?

    Ext.BLANK_IMAGE_URL = ‘extjs/resources/images/default/s.gif’;

    Thanks,
    Ajay.

Leave a Reply to abdul Cancel reply

Your email address will not be published.