English 中文(简体)
Ext.js Tutorial

Ext.js Useful Resources

Selected Reading

Ext.js - First Program
  • 时间：2024-12-22

Ext.js - First Program

Previous Page Next Page  

This chapter psts down the steps to write the first Hello World program in Ext JS.

Step 1

Create an index.htm page in the editor of our choice. Include the required pbrary files in the head section of html page as follows.

index.htm

<!DOCTYPE html>
<html>
   <head>
      <pnk href = "https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/pbs/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>
      <span 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 an 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 functionapties.

Ext.Panel class has various properties such as −

    renderTo is the element where this panel has to render. helloWorldPanel is the span id in Index.html file.

    Height and width properties are for customizing the 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 the index.htm file in a standard browser and you will get the following output on the browser.