ExtJS Tutorial Hello World Example


The easiest way to get started


Though, it is possible to download the library file and save it on your server, we will not use this method. We will instead link to an external library file. This is the method we will adapt to start our learning of Ext JS. All you need to do is to include the link in your script as follows 


<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>


This method will fetch the script file ext-all.js from the sencha website when the page is loaded. This is all is needed to start our learning of ExtJS

Your first ExtJS code


Let us now move on to our first ExtJS code. 



<html>
    <head>

<script type="text/javascript" charset="utf-8" 
src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>
        
        <script type="text/javascript">
       
       
Ext.onReady(function() {
    var myDiv = Ext.get('myDiv');


Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
    myDiv.highlight();         
    }
});

});
</script>

</head>
<body>


<div id="myDiv">This is Reference Designer test div.</div>
</body>
</html>

You may like to try this example here.

Explanation



This is a simple program, that highlights the text (for some time )inside a div element when a button is clicked. In real life this could be used, for example, to highlight a form, if an entry is invalid.

As we indicated earlier, we include the extjs library file using 


<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>


The div element has id of myDiv in 


<div id="myDiv">This is Reference Designer test div.</div>


The onReady function is exectuted as soon as the ext-all.js get loaded. It assigns a variuable myDiv to the div element. 


 function test()
  {
   $("firstDiv").update("New Text - Hello World")
   }


Inside the HTML we define a div element with id firstDiv. It is this id with which we select a particular element that we manipulate. 


 <div id="firstDiv">
      <p>Welcome to ReferenceDesigner.com prototype Tutorial</p> 
   </div>