This chapter lists down the steps to write the first Hello World program in Ext JS.
Create an index.htm page in the editor of our choice. Include the required library files in the head section of html page as follows.
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 functionalities.
Ext.Panel class has various properties such as −
renderTo is the element where this panel has to render. 'helloWorldPanel' is the div 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.
Open the index.htm file in a standard browser and you will get the following output on the browser.