Hello world with ExtJS

If you didn't download ExtJS library still, please read this. I am trying to give here a very small example in Ext JS. In this example there is one simple form with three fields. I am giving some important explanation about basic and necessary functions or objects of Ext JS.

→ Ext.onReady
   
    This is the same function like document.onload event in simple HTML. It will call once your html page is loaded. So if we are not following any MVC architecture while developing application using Ext JS, we have to write everything in this function, otherwise it may happen that in which div/body you are trying to render your Ext JS component, it's not rendered on the page.

→ Ext.create

    Whenever you will create a new object (already defined) of any Ext JS component, we will use this function. This function takes two parameters. 1. Full name of the component which you are trying to create as per given by sencha. 2. Parameters or configurations object.

    So now I am giving you my code snap as given below. I hope this will useful for Ext beginner..!!

→ Download demo, Live example

→ Snaps

Why Ext JS? What Ext JS? How Ext JS?

1. Why ExtJS?

     
      I will explain here in short why should we use Ext JS in your web application.

→ No Need to Worry about HTML Code

     While developing Web Application with ExtJS you do not worry about HTML tags. You can develop a whole application without knowledge of single <form> tag. Of course if you are aware of html tags, it's better for customize components in ExtJS. We will see later how to customize components in ExtJS.


→ Scalability - Code Reuse

   If you are developing big or small application Code re-usability will always take much less efforts in developing. ExtJS is supporting it in a very structured way and also easily from learning point of view.    


→ Very easy to Customize 

  ExtJS is giving very logically file separation and folder structure according to what is the purpose of that file/folder. So we can easily find a particular file for particular component and customize that.

→ Benefit of HTML5 Without know What is it

   You can develop your whole web application by taking all benefits of HTML5 without knowing any attributes of any components in HTML5, because ExtJS 4 internally use and support HTML5.

→ MVC Architecture 

    MVC (model, view, controller) is most widely used Architecture in Web Development at server side as well as client side. So we are talking about here is client side. ExtJS supports MVC architecture in client side development, so it's very easy to maintain your code while developing large applications. We will see shortly in next posts how to setup and start your application with ExtJS MVC.

→ Multiple platforms with No plugin

    This is a very big benefit of ExtJS that it is platform independent for run application. That means no browser plugins need to be installed. You can run your web application on android as well iPhone.

→ Thousands of Ready components

   There are lots of ready components and layout examples available in Sencha docs which we can use directly and also well documented each of them. We will see how to use it.

→ Very good Chart Library

   This is my personal experience that "to integrate charts" in a web application is sometimes headache or confusion that which library to use for that. ExtJS provides us very good and rich charting library purely in JS (JavaScript), so there is no dependency of flash and it will display in any device running on android or Ios. And also as we discussed before in customization topic charts is also very customizable.

→ Maximum utilization of Browser memory

   Every browser provides some local storage memory for saving your current web page data. You can test it here. In simple application (without using any framework) most of the developers are not utilizing that memory, actually we can reuse data which loaded once. ExtJS supports "Store" mechanism for this. We will see how can we achieve this by using ExtJS.

→ Browser Compatibility 

    Ext JS 4 supports all major web browsers, from Internet Explorer 6 to the latest version of Google Chrome. During development, however, we recommend that you choose one of the following browsers for the best debugging experience:

   > Google Chrome 10+
   > Apple Safari 5+
   > Mozilla Firefox 4+ with the Firebug Web Development Plugin


→ Easy to Learn

   There is very good documentation given here and of course I am trying to provide my best here regarding ExtJS..! So it's very easy to use in your web applications.

→ Rapid Development

  By using ready ExtJS components your development process will be very fast.

→ Large Community

   You will get a large number of users who will help you, so take a look here and start to learn and enjoy..!

→ Ready Plugins

   You will get numbers of ready plugins in ExtJS. I am giving you one example here. But we will see how to make our own plugins shortly. 

2. What ExtJS?

      

     ExtJS is a pure JavaScript framework to develop your web applications by taking advantages of DOM scripting, Ajax call, DHTML and many Util functions provided by it. ExtJS can integrate with any backend technology or framework or language like Java, PHP. I will see integration with Java.

3. How ExtJS?

     Before you start developing with ExtJS you have to download library form here. There is a community version available over there. After download just start Hello World with ExtJS and enjoy..!