May 09, 2021 Extjs
This chapter lists the first steps to write a Hello World program in Ext JS:
Create an index page in our .htm editor. Include the desired library file in the head section of the html page, as follows:
index.htm
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js" rel="external nofollow" ></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>
The Ext.onReady() method is called when Ext JS is ready to render The Ext JS element.
The Ext.create() method is used to create objects in Ext JS, where we create a simple panel class Fort.Panel object.
Ext.Panel is a predefined class in Ext JS that is used to create panels.
Each Ext JS class has different properties to perform some basic functions.
The Ext.Panel class has the following properties:
renderTo is the element that this panel must render. /b10> 'HelloWorldPanel' is the div id .html Index's file.
Height and width properties are used to provide custom dimensions for panels.
The Title property provides the title for the panel.
Html property is the html content that you want to display in the panel.
Open the index file in the .htm browser and you will get the following output on the browser.