<tutorialjinni.com/>

Extjs 4 Hello World Tutorial

Posted Under: Extjs, JavaScript on Dec 29, 2012
Extjs 4 Hello World Tutorial
Extjs is a free and open source javascript library used for building rich internet application. Extjs is compatible with almost all major modern browsers. Extjs can be used with jQuery so there is no need to replace jQuery at the same time you can do almost everything with Extjs too. One very interesting feature of Extjs is that is comes with a very beautiful skin/theme.

Getting started is easy, as we will see in this tutorial, we need to include a CSS file and a javascript library and we are good to go with Extjs.

Out of many ways of getting Extjs, one way is to Click Here and download latest version of it, another way is to use hosted CDN. We will use the second option because it will save bandwidth and improve loading time. We are going to use googlecode.
// CSS File
<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />
// javascript File
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js"></script>
Now lets greet our user with a simple popup. 
<script type="text/javascript">

// Make sure all libraries are loaded.

Ext.onReady(function(){

// Extjs Message Box

 Ext.Msg.show({
  title: "Greeting Extjs User",
  msg: "Hello World, Welcome to Extjs. Isn't Cool?",
  icon: Ext.Msg.INFO,
  buttons: Ext.MessageBox.OK
 });
});
</script>
Save the file as index.html and run it in your browser and you will get something like this...

Extjs 4 I very much like the skin/theme provided by Extjs. There are other themes too which I will show you in coming tutorials.

Full Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Extjs 4 Hello World Tutorial</title>

<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />

<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
 Ext.Msg.show({
  title: "Greeting Extjs User",
  msg: "Hello World, Welcome to Extjs. Isn't Cool?",
  icon: Ext.Msg.INFO,
  buttons: Ext.MessageBox.OK
 });
});

</script>
</head>

<body>
</body>
</html>


imgae