Ext.js - Первая программа

В этой главе перечислены шаги по написанию первой программы Hello World на Ext JS.

Шаг 1

Создайте страницу index.htm в редакторе по нашему выбору. Включите необходимые файлы библиотеки в заголовок страницы html следующим образом.

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>

Объяснение

Метод Ext.onReady () будет вызван, когда Ext JS будет готов для рендеринга элементов Ext JS.
Метод Ext.create () используется для создания объекта в Ext JS. Здесь мы создаем объект простого класса панели Ext.Panel.
Ext.Panel - это предопределенный класс в Ext JS для создания панели.
Каждый класс Ext JS имеет разные свойства для выполнения некоторых основных функций.

Класс Ext.Panel имеет различные свойства, такие как -

renderToэто элемент, на котором должна отображаться эта панель. helloWorldPanel - это идентификатор блока в файле Index.html.
Height и width свойства предназначены для настройки размера панели.
Title свойство - предоставить заголовок панели.
Html свойство - это HTML-контент, который будет отображаться на панели.

Шаг 2

Откройте файл index.htm в стандартном браузере, и вы получите следующий результат в браузере.