Friday, February 17, 2017

Ext.js - First Program

This chapter list down the steps to write first Hello World program in Ext JS:

Step 1

Create index.htm page in an editor of our choice. Include the required library files in head section of html page as mentioned below:

index.htm
<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 200,
            width: 600,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel" />
   </body>
</html>

Explanation

  • Ext.onReady() method will be called once the Ext JS is ready to render the Ext JS elements.
  • Ext.create() method is used to create object in Ext JS here we are creating an object of simple panel class Ext.Panel.
  • Ext.Panel is the predefined class in Ext JS for creating a panel.
  • Every Ext JS class has different properties to perform some basic functionalities.
Ext.Panel class has various properties as:
  • renderTo is the element where this panel has to be render. 'helloWorldPanel' is the div id in Index.html file.
  • Height and width properties are for giving custom size of the panel.
  • Title property is to provide the title to the panel.
  • Html property is the html content to be shown in the panel.

Step 2

Open index.htm file in a standard browser and you will get the following output on browser.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)