In this chapter, we will list down the steps to write the first Hello World program in Ext JS.
Create an index.htm page in an editor of our choice. Include the required library files in the head section of html page as follows.
Ext.application() method is the starting point of Sencha Touch application. It creates a global variable called 'Sencha' declared with the name property - all the Application's classes such as its Models, Views and Controllers will reside under this single namespace, which reduces the chances of colliding global variables and file names.
Ext.create() method is used to create an object in Sencha Touch. Here, we are creating an object of simple panel class Ext.tab.Panel.
Ext.tab.Panel is the predefined class in Sencha Touch for creating a panel.
Every Sencha Touch class has different properties to perform some basic functionalities.
Ext.Panel class has various properties such as −
fullscreen property is to make use of a complete screen, hence the panel will take fullscreen space.
items property is the container for various items.
iconCls is the class used for displaying different icons.
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.