Учебники

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

Октябрь 1, 2018

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

Шаг 1

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

index.htm

Live Demo

<!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.onReady () будет вызван, когда Ext JS будет готов для рендеринга элементов Ext JS.

Метод Ext.create () используется для создания объекта в Ext JS. Здесь мы создаем объект простой панели класса Ext.Panel.

Ext.Panel — это предопределенный класс в Ext JS для создания панели.

Каждый класс Ext JS имеет разные свойства для выполнения некоторых основных функций.

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

  • renderTo — это элемент, где эта панель должна отображаться. «helloWorldPanel» — это идентификатор div в файле Index.html.

  • Свойства высоты и ширины предназначены для настройки размера панели.

  • Свойство title должно предоставлять заголовок панели.

  • Свойство Html — это содержимое HTML, которое будет отображаться на панели.

renderTo — это элемент, где эта панель должна отображаться. «helloWorldPanel» — это идентификатор div в файле Index.html.

Свойства высоты и ширины предназначены для настройки размера панели.

Свойство title должно предоставлять заголовок панели.

Свойство Html — это содержимое HTML, которое будет отображаться на панели.

Шаг 2

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

55
Share: