Ext.js - Краткое руководство

Ext JS - это популярный фреймворк JavaScript, который предоставляет богатый пользовательский интерфейс для создания веб-приложений с кросс-браузерной функциональностью. Ext JS в основном используется для создания настольных приложений. Он поддерживает все современные браузеры, такие как IE6 +, FF, Chrome, Safari 6+, Opera 12+ и др. В то время как другой продукт Sencha, Sencha Touch, используется для мобильных приложений.

Ext JS основан на архитектуре MVC / MVVM. Последняя версия Ext JS 6 представляет собой единую платформу, которую можно использовать как для настольных, так и для мобильных приложений без разного кода для разных платформ.

История

Внешний JS 1.1

Первая версия Ext JS была разработана Джеком Слокумом в 2006 году. Это был набор служебных классов, который является расширением YUI. Он назвал библиотеку YUI-ext.

Внешний JS 2.0

Ext JS версии 2.0 был выпущен в 2007 году. Эта версия содержала новую документацию по API для настольных приложений с ограниченными функциями. Эта версия не имеет обратной совместимости с предыдущей версией Ext JS.

Внешний JS 3.0

Ext JS версии 3.0 был выпущен в 2009 году. В этой версии были добавлены новые функции, такие как представление диаграмм и списков, но за счет скорости. Имеет обратную совместимость с версией 2.0.

Внешний JS 4.0

После выпуска Ext JS 3 перед разработчиками Ext JS стояла основная задача - увеличить скорость. Ext JS версии 4.0 был выпущен в 2011 году. Он имел полностью пересмотренную структуру, за которой последовала архитектура MVC и быстрое приложение.

Внешний JS 5.0

Ext JS версии 5.0 был выпущен в 2014 году. Основным изменением в этом выпуске было изменение архитектуры MVC на архитектуру MVVM. Он включает в себя возможность создания настольных приложений на устройствах с сенсорным экраном, двустороннюю привязку данных, адаптивные макеты и многие другие функции.

Внешний JS 6.0

Ext JS 6 объединяет рамки Ext JS (для настольных приложений) и Sencha Touch (для мобильных приложений).

Особенности

Ниже приведены выделенные особенности Ext JS.

  • Настраиваемые виджеты пользовательского интерфейса с набором богатого пользовательского интерфейса, такого как сетки, сводные сетки, формы, диаграммы, деревья.

  • Совместимость кода новых версий со старой.

  • Гибкий менеджер компоновки помогает организовать отображение данных и контента в различных браузерах, устройствах и экранах разных размеров.

  • Пакет данных Advance отделяет виджеты пользовательского интерфейса от уровня данных. Пакет данных позволяет собирать данные на стороне клиента с использованием высокофункциональных моделей, которые включают такие функции, как сортировка и фильтрация.

  • Он не зависит от протокола и может получать доступ к данным из любого внутреннего источника.

  • Настраиваемые темы Виджеты Ext JS доступны в нескольких готовых темах, согласованных на разных платформах.

Льготы

Sencha Ext JS - это ведущий стандарт для разработки веб-приложений бизнес-уровня. Ext JS предоставляет инструменты, необходимые для создания надежных приложений для настольных компьютеров и планшетов.

  • Упрощает кроссплатформенную разработку на настольных компьютерах, планшетах и ​​смартфонах как для современных, так и для устаревших браузеров.

  • Повышает продуктивность групп разработчиков за счет интеграции в корпоративные среды разработки через плагины IDE.

  • Снижает стоимость разработки веб-приложений.

  • Позволяет командам создавать приложения с привлекательным пользовательским интерфейсом.

  • Предлагает набор виджетов для простого создания мощного пользовательского интерфейса.

  • Соответствует архитектуре MVC, поэтому код легко читается.

Ограничения

  • Размер библиотеки большой, около 500 КБ, что увеличивает время начальной загрузки и замедляет работу приложения.

  • HTML полон тегов, что делает его сложным и трудным для отладки.

  • Согласно политике общих публичных лицензий, это бесплатно для приложений с открытым исходным кодом, но платное для коммерческих.

  • Иногда для загрузки даже простых вещей требуется несколько строк кода, что проще в обычном html или JQuery.

  • Нужен достаточно опытный разработчик для разработки Ext JS приложений.

инструменты

Ниже приведены инструменты, предоставляемые Sencha, используемые для разработки приложений Ext JS в основном на производственном уровне.

Сенча CMD

Sencha CMD - это инструмент, который предоставляет функции минификации кода Ext JS, создания шаблонов и создания производственной сборки.

Плагины Sencha IDE

Плагины Sencha IDE интегрируют фреймворки Sencha в IntelliJ, IDE WebStorm, что помогает повысить продуктивность разработчика, предоставляя такие функции, как завершение кода, проверка кода, навигация по коду, генерация кода, рефакторинг кода, создание шаблонов, проверка орфографии и т. Д.

Сенча инспектор

Sencha Inspector - это инструмент отладки, который помогает отладчику отлаживать любую проблему во время разработки.

Настройка локальной среды

В этом разделе рассказывается, как загрузить и настроить Ext JS на вашем компьютере. Пожалуйста, следуйте инструкциям по настройке среды.

Скачивание файлов библиотеки

Загрузите пробную версию файлов библиотеки Ext JS с Sencha https://www.sencha.com. Вы получите пробную версию с сайта на ваш зарегистрированный почтовый идентификатор, который будет представлять собой заархивированную папку с именем ext-6.0.1-trial.

Разархивируйте папку, и вы найдете различные файлы JavaScript и CSS, которые вы включите в наше приложение. В основном мы будем включать следующие файлы -

JavaScript Files - JS-файл, который вы можете найти в папке \ ext-6.0.1-trial \ ext6.0.1 \ build, - это

Старший Нет Описание файла
1

ext.js

Это основной файл, который содержит все функции для запуска приложения.

2

ext-all.js

Этот файл содержит весь минимизированный код без комментариев в файле.

3

ext-all-debug.js

Это унифицированная версия ext-all.js для целей отладки.

4

ext-all-dev.js

Этот файл также не минифицирован и используется для целей разработки, поскольку он содержит все комментарии и журналы консоли для проверки любых ошибок / проблем.

5

ext-all.js

Этот файл используется в основном в производственных целях, поскольку он намного меньше любого другого.

Вы можете добавить эти файлы в папку JS своих проектов или указать прямой путь, по которому файл находится в вашей системе.

CSS Files - Есть несколько тематических файлов, которые вы можете найти в папке \ ext6.0.1-trial \ ext-6.0.1 \ build \ classic \ theme-classic \ resources \ theme-classic-all.css.

  • Если вы собираетесь использовать настольное приложение, то вы можете использовать классические темы в папке \ ext-6.0.1-trial \ ext-6.0.1 \ build \ classic.

  • Если мы собираемся использовать мобильное приложение, то вы можете использовать современные темы, которые находятся в папке \ ext-6.0.1-trial \ ext-6.0.1 \ build \ modern.

Следующие файлы библиотеки будут добавлены в приложение Ext JS.

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "..\ext-6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css" />
      <script type = "text/javascript" 
         src = "..\ext-6.0.1-trial\ext-6.0.1\build\ext-all.js" > </script>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

Вы сохраните код приложения ExtJS в файле app.js.

Настройка CDN

CDN - это сеть доставки контента, с которой вам не нужно загружать файлы библиотеки Ext JS, вместо этого вы можете напрямую добавить ссылку CDN для ExtJS в свою программу следующим образом:

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" / >
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"> </script>
      <script type = "text/javascript" src = "app.js" > </script> 
   </head>
</html>

Популярные редакторы

Поскольку это фреймворк JavaScript, который используется для разработки веб-приложений, в нашем проекте у нас будут файлы HTML, JS. Чтобы писать наши программы на Ext JS, нам понадобится текстовый редактор. На рынке даже доступно несколько IDE. Но пока мы можем рассмотреть одно из следующего -

  • Notepad - На компьютере с Windows вы можете использовать любой простой текстовый редактор, такой как Блокнот (рекомендуется для этого урока), Notepad ++, sublime.

  • Eclipse - Это IDE, разработанная сообществом разработчиков ПО с открытым исходным кодом eclipse, которую можно загрузить с https://www.eclipse.org/.

Браузер

Ext JS поддерживает кроссбраузерную совместимость, он поддерживает все основные браузеры, такие как -

  • IE 6 и выше
  • Firefox 3.6 и выше
  • Chrome10 и выше
  • Safari 4 и выше
  • Opera 11 и выше

Вы можете использовать любой браузер для запуска приложения Ext JS.

Соглашение об именах - это набор правил, которым необходимо следовать для идентификаторов. Это делает код более читаемым и понятным для других программистов.

Соглашение об именах в Ext JS следует стандартному соглашению JavaScript, которое не является обязательным, но рекомендуется соблюдать. Он должен соответствовать синтаксису верблюжьего регистра для именования класса, метода, переменной и свойств.

Если имя состоит из двух слов, второе слово всегда будет начинаться с заглавной буквы. Например, doLayout (), StudentForm, firstName и т. Д.

имя Конвенция
Имя класса Он должен начинаться с прописной буквы, за которой следует верблюжий регистр. Например, StudentClass
Название метода Он должен начинаться со строчной буквы, за которой следует верблюжий регистр. Например, doLayout ()
Имя переменной Он должен начинаться со строчной буквы, за которой следует верблюжий регистр. Например, firstName
Постоянное имя Он должен быть только в верхнем регистре. Например, COUNT, MAX_VALUE
Имя свойства Он должен начинаться со строчной буквы, за которой следует верблюжий регистр. Например, enableColumnResize = true

Ext JS следует архитектуре MVC / MVVM.

MVC - Архитектура Model View Controller (версия 4)

MVVM - Модель View Viewmodel (версия 5)

Эта архитектура не является обязательной для программы, однако рекомендуется следовать этой структуре, чтобы сделать ваш код легко поддерживаемым и организованным.

Структура проекта с приложением Ext JS

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Папка приложения Ext JS будет находиться в папке JavaScript вашего проекта.

Приложение будет содержать файлы контроллера, представления, модели, магазина и служебных программ с app.js.

app.js- Основной файл, из которого будет запускаться поток программы, который должен быть включен в основной файл HTML с помощью тега <script>. Приложение вызывает контроллер приложения для выполнения остальных функций.

Controller.js- Это файл контроллера архитектуры Ext JS MVC. Он содержит все элементы управления приложением, прослушиватели событий и большую часть функциональных возможностей кода. У него есть путь, определенный для всех других файлов, используемых в этом приложении, таких как store, view, model, require, mixins.

View.js- Он содержит интерфейсную часть приложения, которая отображается пользователю. Ext JS использует различные представления с расширенными возможностями пользовательского интерфейса, которые могут быть расширены и настроены здесь в соответствии с требованиями.

Store.js- Он содержит локально кэшированные данные, которые должны отображаться на виде с помощью объектов модели. Store извлекает данные с помощью прокси-серверов, для которых определен путь для сервисов для получения данных серверной части.

Model.js- Он содержит объекты, которые привязывают данные магазина к просмотру. Он имеет сопоставление объектов данных серверной части с представлением dataIndex. Данные извлекаются с помощью магазина.

Utils.js- Он не включен в архитектуру MVC, но рекомендуется использовать для того, чтобы сделать код чистым, менее сложным и более читаемым. Мы можем записывать методы в этот файл и вызывать их в контроллере или рендерере представления, где это необходимо. Это также полезно для повторного использования кода.

В архитектуре MVVM контроллер заменен ViewModel.

ViewModel- Это в основном посредник при изменении представления и модели. Он связывает данные из модели с представлением. В то же время он не имеет прямого взаимодействия с видом. У него есть только знание модели.

Как это устроено

Например, если мы используем один объект модели в двух-трех местах пользовательского интерфейса. Если мы изменим значение в одном месте пользовательского интерфейса, мы сможем увидеть, даже не сохраняя это изменение. Ценность модели меняется и поэтому отражается во всех местах пользовательского интерфейса, где бы модель ни использовалась.

Это значительно упрощает и сокращает усилия разработчиков, поскольку для привязки данных не требуется дополнительного кодирования.

В этой главе перечислены шаги по написанию первой программы 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 в стандартном браузере, и вы получите следующий результат в браузере.

Ext JS - это среда JavaScript, имеющая функции объектно-ориентированного программирования. Ext - это пространство имен, которое инкапсулирует все классы в Ext JS.

Определение класса в Ext JS

Ext предоставляет более 300 классов, которые мы можем использовать для различных функций.

Ext.define () используется для определения классов в Ext JS.

Синтаксис

Ext.define(class name, class members/properties, callback function);

Имя класса - это имя класса в соответствии со структурой приложения. Например, appName.folderName.ClassName studentApp.view.StudentView.

Свойства / члены класса определяют поведение класса.

Функция обратного вызова не является обязательной. Он вызывается, когда класс загружается правильно.

Пример определения класса Ext JS

Ext.define(studentApp.view.StudentDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   id : 'studentsDetailsGrid',
   store : 'StudentsDetailsGridStore',
   renderTo : 'studentsDetailsRenderDiv',
   layout : 'fit',
   
   columns : [{
      text : 'Student Name',
      dataIndex : 'studentName'
   },{
      text : 'ID',
      dataIndex : 'studentId'
   },{
      text : 'Department',
      dataIndex : 'department'
   }]
});

Создание объектов

Как и другие языки, основанные на OOPS, мы также можем создавать объекты в Ext JS.

Ниже приведены различные способы создания объектов в Ext JS.

Использование нового ключевого слова

var studentObject = new student();
studentObject.getStudentName();

Использование Ext.create ()

Ext.create('Ext.Panel', {
   renderTo : 'helloWorldPanel',
   height : 100,
   width : 100,
   title : 'Hello world',
   html : 	'First Ext JS Hello World Program'		
});

Наследование в Ext JS

Наследование - это принцип использования функций, определенных в классе A, в классе B.

В Ext JS наследование может быть выполнено двумя способами:

Ext.extend

Ext.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

Здесь наш собственный класс StudentDetailsGrid использует базовые функции класса Ext JS GridPanel.

Использование миксинов

Mixins - это другой способ использования класса A в классе B без расширения.

mixins : {
   commons : 'DepartmentApp.utils.DepartmentUtils'
},

Миксины добавляются в контроллер, где мы объявляем все другие классы, такие как store, view и т. Д. Таким образом, мы можем вызвать класс DepartmentUtils и использовать его функции в контроллере или в этом приложении.

Контейнер в Ext JS - это компонент, в который мы можем добавить другой контейнер или дочерние компоненты. Эти контейнеры могут иметь несколько макетов для размещения компонентов в контейнерах. Мы можем добавлять или удалять компоненты из контейнера и его дочерних элементов. Ext.container.Container - это базовый класс для всех контейнеров в Ext JS.

Старший Нет Описание
1 Компоненты внутри контейнера

В этом примере показано, как определить компоненты внутри контейнера.

2 Контейнер внутри контейнера

В этом примере показано, как определить контейнер внутри контейнера с другими компонентами.

Существуют различные типы контейнеров: Ext.panel.Panel, Ext.form.Panel, Ext.tab.Panel и Ext.container.Viewport - часто используемые контейнеры в Ext JS. Ниже приведен пример, показывающий, как использовать эти контейнеры.

Sr. No. Тип контейнеров и описание
1 Внешняя панель.

В этом примере показан контейнер Ext.panel.Panel

2 Внешняя форма. Панель

В этом примере показан контейнер Ext.form.Panel

3 Ext.tab.Panel

В этом примере показан контейнер Ext.tab.Panel

4 Ext.container.Viewport

В этом примере показан контейнер Ext.container.Viewport

Макет - это способ расположения элементов в контейнере. Он может быть горизонтальным, вертикальным или любым другим. Ext JS имеет другой макет, определенный в его библиотеке, но мы также всегда можем написать собственные макеты.

Старший Нет Макет и описание
1 Абсолютное

Этот макет позволяет размещать элементы в контейнере с помощью координат XY.

2 Аккордеон

Этот макет позволяет размещать все элементы в виде стопки (один поверх другого) внутри контейнера.

3 Якорь

Этот макет дает пользователю право определять размер каждого элемента относительно размера контейнера.

4 Граница

В этом макете различные панели вложены и разделены рамками.

5 Авто

Это макет по умолчанию, который определяет расположение элементов в зависимости от количества элементов.

6 Карточка (TabPanel)

В этом макете различные компоненты расположены в виде вкладок. Вкладки будут отображаться в верхней части контейнера. Каждый раз видна только одна вкладка, и каждая вкладка рассматривается как отдельный компонент.

7 Карта (Волшебник)

В этом макете каждый раз, когда элементы занимают все пространство контейнера. В мастере навигации есть нижняя панель инструментов.

8 Столбец

Этот макет предназначен для отображения нескольких столбцов в контейнере. Мы можем определить фиксированную или процентную ширину столбцов. Ширина в процентах будет рассчитана на основе полного размера контейнера.

9 Поместиться

В этом макете контейнер заполнен одной панелью. Когда нет особых требований, связанных с макетом, используется этот макет.

10 Стол

Как следует из названия, этот макет упорядочивает компоненты в контейнере в формате таблицы HTML.

11 vBox

Этот макет позволяет размещать элементы вертикально. Это один из наиболее часто используемых макетов.

12 hBox

Такая компоновка позволяет размещать элементы горизонтально.

Пользовательский интерфейс ExtJS состоит из одного или нескольких виджетов, называемых Компонентами. В Ext Js определены различные компоненты пользовательского интерфейса, которые можно настроить в соответствии с вашими требованиями.

Старший Нет Методы и описание
1 Сетка

Компонент сетки можно использовать для отображения данных в табличном формате.

2 Форма

Виджет формы предназначен для получения данных от пользователя.

3 Окно сообщения

Окно сообщения в основном используется для отображения данных в виде окна предупреждения.

4 Диаграмма

Диаграммы используются для представления данных в графическом формате.

5 Совет инструмента

Всплывающая подсказка используется для отображения основной информации при возникновении любого события.

6 Окно

Этот виджет пользовательского интерфейса предназначен для создания окна, которое должно всплывать при возникновении любого события.

7 Редактор HTML

Редактор HTML - один из очень полезных компонентов пользовательского интерфейса, который используется для стилизации данных, вводимых пользователем, с точки зрения шрифтов, цвета, размера и т. Д.

8 Индикатор

Показывает ход работы серверной части.

Функция перетаскивания - одна из мощных функций, добавленных для облегчения задачи разработчика. Операция перетаскивания, по сути, представляет собой жест щелчка по некоторому элементу пользовательского интерфейса, когда кнопка мыши удерживается и мышь перемещается. Операция перетаскивания происходит, когда кнопка мыши отпускается после операции перетаскивания.

Синтаксис

Добавление класса перетаскивания к перетаскиваемым целям.

var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
   isTarget: false
});

Добавление целевого класса перетаскивания в драпируемую цель.

var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
   ignoreSelf: false
});

пример

Ниже приводится простой пример.

<!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.application ({
            launch: function() {
               var images = Ext.get('images').select('img');
               Ext.each(images.elements, function(el) {
                  var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
                     isTarget: false
                  });
               });
            }
         }); 
         var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
            ignoreSelf: false
         });
      </script>
      
      <style>
         #content {
            width:600px;
            height:400px;
            padding:10px;
            border:1px solid #000;
         }
         #images {
            float:left;
            width:40%;
            height:100%;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         #mainRoom {
            float:left;
            width:55%;
            height:100%;
            margin-left:15px;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         .image {   
            width:64px;
            height:64px;
            margin:10px;
            cursor:pointer;
            border:1px solid Black;
            display: inline-block;
         }
      </style>
   </head>
   
   <body>
      <div id = "content">   
         <div id = "images"> 
            <img src = "/extjs/images/1.jpg" class = "image" />
            <img src = "/extjs/images/2.jpg" class = "image" />
            <img src = "/extjs/images/3.jpg" class = "image" />
            <img src = "/extjs/images/4.jpg" class = "image" />
            <img src = "/extjs/images/5.jpg" class = "image" />
            <img src = "/extjs/images/6.jpg" class = "image" />
            <img src = "/extjs/images/7.jpg" class = "image" />
            <img src = "/extjs/images/8.jpg" class = "image" />
         </div>
         <div id = "mainRoom"></div>
      </div>
   </body>
</html>

Вышеупомянутая программа даст следующий результат -

С помощью перетаскивания в Extjs мы можем перемещать данные из сетки в сетку и из сетки в форму. Ниже приведены примеры перемещения данных между сетками и формами.

Перетаскивание - сетка в сетку

перетащить - сетка в форму

Ext.js предоставляет несколько тем для использования в ваших приложениях. Вы можете добавить другую тему вместо классической и увидеть разницу в результатах. Это делается простой заменой файла CSS темы, как описано выше.

Тема Нептуна

Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения.

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Добавьте следующий CSS, чтобы использовать тему Neptune.

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css

Чтобы увидеть эффект, попробуйте следующую программу.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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>

Вышеупомянутая программа даст следующий результат -

Четкая тема

Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения.

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Добавьте следующий CSS, чтобы использовать тему Neptune.

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css

Чтобы увидеть эффект, попробуйте следующую программу.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-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>

Вышеупомянутая программа даст следующий результат -

Тема Тритона

Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения.

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Добавьте следующий CSS, чтобы использовать тему Triton.

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css

Чтобы увидеть эффект, попробуйте следующую программу.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-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>

Вышеупомянутая программа даст следующий результат -

Серая тема

Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения.

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Добавьте следующий CSS, чтобы использовать серую тему.

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css

Чтобы увидеть эффект, попробуйте следующую программу.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-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 JS предоставляет свойство слушателя для записи событий и пользовательских событий в файлы Ext JS.

Writing listener in Ext JS

Мы добавим слушателя в саму предыдущую программу, добавив свойство listen в панель.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button is clicked');	
                  }
               }
            });
         });
      </script> 
   </head>
   
   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

Вышеупомянутая программа даст следующий результат -

Таким образом, мы также можем записать несколько событий в свойство listeners.

Multiple Events in the Same Listener

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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.get('tag2').hide()
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  click: function() {
                     this.hide();
                  },
                  hide: function() {
                     Ext.get('tag1').hide();
                     Ext.get('tag2').show();
                  }
               }
            });
         });           
      </script> 
   </head>
   
   <body>
      <div id = "tag1">Please click the button to see event listener.</div>
      <div id = "tag2">The button was clicked and now it is hidden.</div>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

Присоединение события позже

В предыдущем методе записи событий мы записывали события в слушателях во время создания элементов. Другой способ - прикрепить события.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button'
            });

            // This way we can attach event to the button after the button is created.
            button.on('click', function() {
               Ext.MessageBox.alert('Alert box', 'Button is clicked');
            });
         });
      </script> 
   </head>
   
   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

Вышеупомянутая программа даст следующий результат -

Пользовательские события

Мы можем писать собственные события в Ext JS и запускать события с помощью метода fireEvent. В следующем примере объясняется, как писать собственные события.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-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() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  myEvent: function(button) {
                     Ext.MessageBox.alert('Alert box', 'My custom event is called');
                  }
               }
            });
            Ext.defer(function() {
               button.fireEvent('myEvent');
            }, 5000);
         }); 
      </script> 
   </head>
   
   <body>
      <p> The event will be called after 5 seconds when the page is loaded. </p>
      <div id = 'helloWorldPanel' />   <!--  panel will be rendered here-- >
   </body>
</html>

После загрузки страницы и готовности документа появится страница пользовательского интерфейса с кнопкой, и, поскольку мы запускаем событие через 5 секунд, документ готов. Окно предупреждения появится через 5 секунд.

Здесь мы написали настраиваемое событие myEvent и запускаем события как button.fireEvent (eventName);

Пакет данных используется для загрузки и сохранения всех данных в приложении.

Пакет данных имеет множество классов, но наиболее важными из них являются:

  • Model
  • Store
  • Proxy

Модель

Базовый класс модели - Ext.data.Model. Он представляет собой объект в приложении. Он связывает данные магазина для просмотра. Он имеет сопоставление объектов данных серверной части с представлением dataIndex. Данные извлекаются с помощью магазина.

Создание модели

Для создания модели нам нужно расширить класс Ext.data.Model и определить поля, их имя и сопоставление.

Ext.define('StudentDataModel', {
   extend: 'Ext.data.Model',
   fields: [
      {name: 'name', mapping : 'name'},
      {name: 'age', mapping : 'age'},
      {name: 'marks', mapping : 'marks'}
   ]
});

Здесь имя должно быть таким же, как dataIndex, который мы объявляем в представлении, а отображение должно соответствовать статическим или динамическим данным из базы данных, которые должны быть получены с помощью store.

хранить

Базовый класс для магазина Ext.data.Store. Он содержит локально кэшированные данные, которые должны отображаться на экране с помощью объектов модели. Store извлекает данные с помощью прокси-серверов, в которых определен путь для служб для извлечения данных из серверной части.

Данные из магазина можно получить двумя способами - статическим или динамическим.

Статический магазин

Для статического хранилища у нас будут все данные, присутствующие в хранилище, как показано в следующем коде.

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   data: [
      { name : "Asha", age : "16", marks : "90" },
      { name : "Vinit", age : "18", marks : "95" },
      { name : "Anand", age : "20", marks : "68" },
      { name : "Niharika", age : "21", marks : "86" },
      { name : "Manali", age : "22", marks : "57" }
   ];
});

Динамический магазин

Динамические данные можно получить с помощью прокси. У нас может быть прокси, который может получать данные из Ajax, Rest и Json.

Прокси

Базовый класс для прокси - Ext.data.proxy.Proxy. Прокси-сервер используется моделями и магазинами для обработки загрузки и сохранения данных модели.

Есть два типа прокси

  • Клиентский прокси
  • Прокси-сервер

Клиентский прокси

Клиентские прокси включают память и локальное хранилище с использованием локального хранилища HTML5.

Прокси-сервер

Прокси-серверы обрабатывают данные с удаленного сервера с помощью Ajax, данных Json и службы Rest.

Defining proxies in the server

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   proxy : {
      type : 'rest',
      actionMethods : {
         read : 'POST'  // Get or Post type based on requirement
      },
      url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path 
      // which fetches data from database or Json file path where the data is stored
      reader: {
         type : 'json',  // the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});

Ext.js предоставляет возможность использовать различные пакеты шрифтов. Пакеты шрифтов используются для добавления различных классов значков, доступных в пакете.

  • Font-Awesome
  • Font-Pictos

Font-Awesome

Новая тема ExtJS, Triton, имеет встроенное семейство шрифтов font-awesome, включенное в сам фреймворк, поэтому нам не нужны явные требования для таблицы стилей font-awesome.

Ниже приведен пример использования классов Font-Awesome в теме Triton.

Font-Awesome с темой Triton

Когда мы используем любую другую тему, кроме Triton, нам нужно или требуется явно добавить таблицу стилей для font-awesome.

Ниже приведен пример использования классов Font-Awesome без темы Triton.

Font-Awesome с обычной темой (любая тема, кроме темы Triton)

Font-Pictos

Font-pictos не входит в фреймворк для ExtJS, следовательно, нам необходимо то же самое. Только лицензированные пользователи Sencha смогут использовать font-pictos.

Шаги по добавлению шрифтов-пиктосов

Step 1 - Требовать класс font-pictos с помощью следующей команды.

"requires": ["font-pictos"]

Step 2 - Теперь добавьте классы пиктос как -

iconCls: 'pictos pictos-home'

Стиль приложения относится к пользовательской настройке внешнего вида компонентов. Эти настройки могут включать: цвет, цветовые градиенты, шрифт, поля / отступы и т. Д. Ext JS 6 имеет новый способ стилизации приложения.

Он использует SCSS для стилизации. SCSS - это более динамичный способ написания кода CSS. С его помощью мы можем записать переменные в нашу таблицу стилей. Однако браузер не может понять SCSS. Он может понимать только CSS, поэтому все файлы SCSS должны быть скомпилированы в CSS в готовый к работе код.

Таким образом, файл SCSS называется файлами препроцессора. В Ext.js компиляция выполняется с помощью инструмента Sencha CMD. Sencha CMD компилирует его вручную только один раз, используя следующую команду.

sencha app build [development]

Global_CSS - это основной файл CSS, который имеет все переменные SCSS, связанные с ним в ExtJS, которые можно использовать в нашем приложении для настройки нашей темы, предоставляя различные значения в зависимости от наших потребностей.

Ниже приведены некоторые из переменных CSS, доступных в Global_CSS в Ext.js.

Старший Нет Переменная и описание
1

$base-color

$ base-color: color (например, $ base-color: # 808080)

Этот основной цвет будет использоваться во всей теме.

2

$base-gradient

$base-gradient: string (e.g. $базовый градиент: 'матовый')

Этот базовый градиент будет использоваться по всей теме.

3

$body-background-color

$ body-background-color: color (например, $ body-background-color: # 808080)

Цвет фона, применяемый к элементу тела. Если установлено значение transparent или none, для основного элемента не будет установлен стиль цвета фона.

4

$color

$color : color (e.g. $цвет: # 808080)

Этот цвет текста по умолчанию должен использоваться во всей теме.

5

$font-family

$ font-family: string (например, $ font-family: arial)

Это семейство шрифтов по умолчанию должно использоваться во всей теме.

6

$font-size

$font-size : number (e.g. $размер шрифта: 9 пикселей)

Этот размер шрифта по умолчанию должен использоваться во всей теме.

7

$font-weight

$ font-weight: строка / число (например, $ font-weight: normal)

Этот шрифт по умолчанию должен использоваться во всей теме.

8

$font-weight-bold

$font-weight-bold : string/number (e.g. $font-weight-bold: жирный)

Этот шрифт по умолчанию для жирного шрифта должен использоваться во всей теме.

9

$include-chrome

$ include-chrome: boolean (например, $ include-chrome: true)

Верно, чтобы включить специальные правила Chrome.

10

$include-ff

$include-ff : boolean (e.g. $include-ff: правда)

Верно, чтобы включить специальные правила Firefox.

11

$include-ie

$ include-ie: логическое (например, $ include-ie: true)

True, чтобы включить специальные правила Internet Explorer для IE9 и ниже.

12

$include-opera

$include-opera : boolean (e.g. $include-opera: правда)

Верно, чтобы включить специальные правила Opera.

13

$include-safari

$ include-safari: логическое (например, $ include-safari: true)

Верно, чтобы включить специальные правила Opera.

14

$include-webkit

$include-webkit : boolean (e.g. $include-webkit: правда)

Верно, чтобы включить специальные правила Webkit.

Пакет рисования в ExtJS позволяет рисовать графику общего назначения. Это можно использовать для графики, которая работает во всех браузерах и мобильных устройствах.

Старший Нет Рисование
1 Круг

Эта графика используется для создания круговой формы.

2 Прямоугольник

Эта графика используется для создания прямоугольной формы.

3 Дуга

Эта графика используется для создания дуги.

4 Эллипс

Эта графика используется для создания формы эллипса.

5 Эллиптическая дуга

Эта графика используется для создания эллиптической дуги.

6 Образ

Эта графика используется для добавления изображения в ваше приложение.

7 Путь

Эта графика используется для создания свободного пути.

8 Текст

Эта графика используется для добавления любого текста в ваше приложение.

9 Перевести после рендера

Это свойство используется для перемещения начальной точки в вашем контейнере после визуализации изображения. Его можно использовать с любой графикой.

10 Вращение

Это свойство используется для добавления поворота к добавленному чертежу. Его можно использовать с любой графикой.

11 Квадрат

Этот рисунок используется для создания квадрата.

Всегда лучше общаться с пользователями на том языке, который они понимают и предпочитают. Пакет локализации Extjs поддерживает более 40 языков, таких как немецкий, французский, корейский, китайский и т. Д. Реализовать локаль в ExtJs очень просто. Вы найдете все связанные файлы локали в папке переопределения пакета ext-locale. Файлы локали просто переопределяют, что сообщает Ext JS о необходимости замены английских значений по умолчанию для определенных компонентов.

Следующая программа должна показать месяц в другом языке, чтобы увидеть эффект. Попробуйте следующую программу.

<!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" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
            var ds = Ext.create('Ext.data.Store', {
               fields: ['month'],
               remoteSort: true,
               pageSize: 6,
               
               proxy: {
                  type: 'memory',
                  enablePaging: true,
                  data: monthArray,
                  reader: {type: 'array'}
               }
            });
            Ext.create('Ext.grid.Panel', {
               renderTo: 'grid',
               id : 'gridId',
               width: 600,
               height: 200,
               title:'Month Browser',
               
               columns:[{
                  text: 'Month of the year',
                  dataIndex: 'month',
                  width: 300
               }],
               store: ds,
               bbar: Ext.create('Ext.toolbar.Paging', {
                  pageSize: 6,
                  store: ds,
                  displayInfo: true
               })
            }); 
            Ext.getCmp('gridId').getStore().load();
         });
      </script>
   </head>
   
   <body>
      <div id = "grid" />
   </body>
</html>

Вышеупомянутая программа даст следующий результат

Для использования другой локали, кроме английского, нам нужно будет добавить в нашу программу файл, специфичный для локали. Здесь мы используем https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.js для французского языка. Вы можете использовать разные языковые стандарты для разных языков, например https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js для корейского и т. Д.

Следующая программа предназначена для отображения средства выбора даты на корейском языке, чтобы увидеть эффект. Попробуйте следующую программу.

<!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" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js"></script>
      
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.picker.Date', {
               renderTo: 'datePicker'
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "datePicker" />
   </body>
</html>

Вышеупомянутая программа даст следующий результат -

В следующей таблице перечислены несколько языковых стандартов, доступных в ExtJS, и URL-адрес основного файла, который необходимо изменить.

Locale Язык URL-адрес локали
ко корейский язык https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js
fr французский язык https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js
es испанский язык https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js
я Японский https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js
Это Итальянский https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js
ру русский https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js
zh_CN Упрощает китайский https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js

В общем случае доступность означает доступность, а контент доступен, значит, контент доступен.

С точки зрения программного обеспечения, приложение доступно, означает, что приложение доступно для всех. Здесь все означает людей с ограниченными возможностями, слабовидящих или тех, кто использует программы чтения с экрана для использования компьютера, или тех, кто предпочитает перемещаться с помощью клавиатуры вместо использования мыши. навигация с помощью клавиатуры вместо использования мыши.

Доступные приложения называются ARIA (Accessible Rich Internet Applications).

Доступность в Ext JS

Ext JS разработан с учетом того, что он должен работать со всеми клавишами навигации. Он имеет встроенную индексацию вкладок и возможность фокусировки, и он всегда включен по умолчанию, поэтому нам не нужно добавлять какое-либо свойство для включения этой функции.

Эта функция позволяет всем компонентам с клавиатурой взаимодействовать с пользователем, когда они открыты. Например, мы можем использовать вкладку для перехода к следующему компоненту вместо мыши. Таким же образом мы можем использовать shift + tab для перемещения назад и использовать ввод на клавиатуре для нажатия и т. Д.

Стиль фокуса и вкладки

Фокус встроен в Extjs при использовании нажатия клавиш для табуляции.

В следующем примере показано, как меняется стиль, когда фокус меняется вместе с вкладками.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-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.Button', {
               renderTo: Ext.getElementById('button1'),
               text: 'Button1',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 1 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button2'),
               text: 'Button2',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 2 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button3'),
               text: 'Button3',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 3 is clicked');	
                  }
               }
            });
         });     
      </script>
   </head>
   
   <body> <p>Please click the button to see event listener:</p>
      <span id = "button3"/>
      <span id = "button2"/>
      <span id = "button1"/>
   </body>
</html>

Чтобы увидеть эффект, используйте tab для перехода от следующей кнопки и shft + tab для фокусировки назад. Используйте ввод и посмотрите, как появится соответствующее предупреждение выбранной кнопки.

Тема ARIA

ExtJS предоставляет тематическую арию для слабовидящих.

В следующем примере показана тема арии, которая легко доступна для слабовидящих.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-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.require([
            'Ext.grid.*',
            'Ext.data.*'
         ]);
         
         // Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });

         Ext.onReady(function() {
            // Store data
            var myData = [
               { name : "Asha", age : "16", marks : "90" },
               { name : "Vinit", age : "18", marks : "95" },
               { name : "Anand", age : "20", marks : "68" },
               { name : "Niharika", age : "21", marks : "86" },
               { name : "Manali", age : "22", marks : "57" }
            ];
            
            // Creation of first grid store
            var firstGridStore = Ext.create('Ext.data.Store', {
               model: 'StudentDataModel',
               data: myData
            });
            
            // Creation of first grid
            var firstGrid = Ext.create('Ext.grid.Panel', {
               store            : firstGridStore,
               columns          :
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',	
                  id : 'name',    
                  flex:  1,  			
                  sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }],
               stripeRows       : true,
               title            : 'First Grid',
               margins          : '0 2 0 0'
            });
     
            // Creation of a panel to show both the grids.
            var displayPanel = Ext.create('Ext.Panel', {
               width        : 600,
               height       : 200,
               
               layout       : {
                  type: 'hbox',
                  align: 'stretch',
                  padding: 5
               },
               renderTo     : 'panel',
               defaults     : { flex : 1 }, 
               items        : [ 
                  firstGrid
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "panel" > </div>
   </body>
</html>

Вышеупомянутая программа даст следующий результат. Вы можете использовать вкладку и клавиши мыши вверх и вниз для перемещения фокуса по сетке, и тема в основном предназначена для людей с ослабленным зрением.

Любой код JavaScript можно отладить с помощью alert() коробка или console.log() или с указателем отладки в отладчике.

Окно предупреждения

Поместите поле предупреждения в код, где вы хотите проверить поток или любое значение переменной. Например, alert ('сообщение для отображения' + переменная);

Инструмент для разработки / отладки

Отладчик - это самый важный инструмент для любого разработчика, позволяющий проверить наличие проблемы и ошибки в коде во время разработки.

Ext JS - это фреймворк JavaScript, поэтому его можно легко отлаживать с помощью инструментов разработчика, предоставляемых или специфичных для разных браузеров. Все основные браузеры имеют свои инструменты разработчика для тестирования и отладки кода JavaScript.

Популярные отладчики - это инструмент разработки IE для IE, firebug для firefox и инструмент разработки Chrome для браузера Chrome.

Отладчик Chrome поставляется с браузером Chrome, однако firebug должен быть установлен специально, поскольку он не входит в пакет с firefox.

Вот ссылка для установки firebug для браузера Firefox http://getfirebug.com

Ярлык для открытия средства разработки в ОС Windows - это клавиша клавиатуры F12.

Отладка JS-кода в отладчике

Есть два способа отладки кода JavaScript.

  • Первый способ - разместить console.log() в коде и посмотрите значение журнала, которое будет напечатано в консоли средства разработки.

  • Второй способ - использовать точки останова в средстве разработки. Ниже приведен процесс.

    • Откройте файл во всех доступных скриптах под тегом скрипта.

    • Теперь поместите точку останова в строку, которую вы хотите отладить.

    • Запустите приложение в браузере.

    • Теперь, когда поток кода достигает этой строки, он прерывает код и остается там, пока пользователь не запустит код с помощью клавиш F6 (перейти к следующей строке кода), F7 (перейти внутрь функции) или F8 (перейти к следующей точке останова или запустите код, если точек останова больше нет) в зависимости от потока, который вы хотите отлаживать.

    • Вы можете выбрать переменную или функцию, значение которой хотите увидеть.

    • Вы можете использовать консоль для проверки значения или для проверки некоторых изменений в самом браузере.

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

Ext.is класс

Этот класс проверяет используемую вами платформу, будь то телефон или настольный компьютер, операционная система Mac или Windows. Это следующие методы, относящиеся к классу Ext.is.

Старший Нет Методы и описание
1

Ext.is.Platforms

Эта функция возвращает платформу, доступную для этой версии.

Например, когда вы запускаете следующую функцию, она возвращает что-то вроде этого:

[Object { property = "platform", regex = RegExp, identity = "iPhone"}, 
Object { property = "platform", regex = RegExp, identity = "iPod"}, 
Object { property = "userAgent", regex = RegExp, identity = "iPad"}, 
Object { property = "userAgent", regex = RegExp, identity = "Blackberry"}, 
Object { property = "userAgent", regex = RegExp, identity = "Android"}, 
Object { property = "platform", regex = RegExp, identity = "Mac"}, 
Object { property = "platform", regex = RegExp, identity = "Windows"}, 
Object { property = "platform", regex = RegExp, identity = "Linux"}]
2

Ext.is.Android

Эта функция вернет true, если вы используете операционную систему Android, иначе она вернет false.

3

Ext.is.Desktop

Эта функция вернет true, если вы используете для приложения рабочий стол, иначе она вернет false.

4

Ext.is.Phone

Эта функция вернет истину, если вы используете мобильный телефон, иначе она вернет ложь.

5

Ext.is.iPhone

Эта функция вернет истину, если вы используете iPhone, иначе она вернет ложь.

6

Ext.is.iPod

Эта функция вернет истину, если вы используете iPod, иначе она вернет ложь.

7

Ext.is.iPad

Эта функция вернет истину, если вы используете iPad, иначе она вернет ложь.

8

Ext.is.Windows

Эта функция вернет true, если вы используете операционную систему Windows, иначе она вернет false.

9

Ext.is.Linux

Эта функция вернет true, если вы используете операционную систему Linux, иначе она вернет false.

10

Ext.is.Blackberry

Эта функция вернет истину, если вы используете Blackberry, иначе она вернет ложь.

11

Ext.is.Mac

Эта функция вернет true, если вы используете операционную систему Mac, иначе она вернет false.

Класс Ext.supports

Как видно из названия, этот класс предоставляет информацию о том, поддерживается ли данная функция в текущей среде браузера / устройства или нет.

Старший Нет Методы и описание
1

Ext.supports.History

Он проверяет, поддерживает ли устройство историю HTML 5 как window.history или нет. Если устройство поддерживает историю, то возвращаетtrue, иначе ложь.

2

Ext.supports.GeoLocation

Он проверяет, поддерживает ли устройство метод геолокации. Внутренне он проверяет метод navigator.geolocation.

3

Ext.supports.Svg

Он проверяет, поддерживает ли устройство метод масштабируемой векторной графики (svg) функции HTML 5 или нет. Внутренне он проверяет наличие doc.createElementNS && !! doc.createElementNS ("http: /" + "/www.w3.org/2000/svg", "svg"). CreateSVGRect.

4

Ext.supports.Canvas

Он проверяет, поддерживает ли устройство HTML 5 компонентный холст для метода рисования или нет. Внутренне он проверяет наличие doc.createElement ('canvas'). GetContext и возвращает значение на основе вывода этого метода.

5

Ext.supports.Range

Он проверяет, поддерживает ли браузер метод document.createRange или нет.

Класс Ext.String

Класс Ext.String имеет различные методы для работы со строковыми данными. Наиболее часто используемые методы - это кодирование, декодирование, обрезка, переключение, urlAppend и т. Д.

Encoding Decoding function - Это функции, доступные в классе Ext.String для кодирования и декодирования значений HTML.

Старший Нет Методы и описание
1

Ext.String.htmlEncode

Эта функция используется для кодирования значения html, чтобы сделать его доступным для анализа.

Example -

Ext.String.htmlEncode("< p > Hello World < /p >"); 
Output - "&lt; p &gt; Hello World &lt; /p &gt;".
2

Ext.String.htmlDecode

Эта функция используется для декодирования закодированного значения html.

Example -

Ext.String.htmlDecode("&lt; p &gt; Hello World &lt; /p &gt;");
Output -  "< p > Hello World < /p >"
3

Ext.String.trim

Эта функция предназначена для обрезки нежелательного пространства в строке.

Ext.String.trim('      hello      ');
Output – "hello"
4

Ext.String.urlAppend

Этот метод используется для добавления значения в строку URL.

Example -

Ext.String.urlAppend('https://www.google.com' , 'hello'); 
Output - "https://www.google.com?hello" 
Ext.String.urlAppend('https://www.google.com?index=1' , 'hello'); 
Output – "https://www.google.com?index=1&hello"
5

Ext.String.toggle

Эта функция предназначена для переключения значений между двумя разными значениями.

Example -

var toggleString = 'ASC' 
toggleString = Ext.String.toggle(a, 'ASC', 'DESC');
Output – DESC as toggleString had value ASC. Now again, if we 
print the same we will get toggleString = “ASC” this time, as 
it had value 'DESC'. 
It is similar to ternary operator 
toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );

Разные методы

Старший Нет Методы и описание
1

Ext.userAgent()

Эта функция предоставляет информацию о userAgent браузера. UserAgent предназначен для идентификации браузера и операционной системы на веб-сервере.

Example - Если вы работаете в Mozilla, он возвращает что-то вроде: «mozilla / 5.0 (windows NT 6.1; wow64; rv: 43.0) gecko / 20100101 firefox / 43.0»

2

Version related function

Эта функция возвращает версию используемого в данный момент браузера, если функция вызывается из IE. В браузере Firefox возвращается 0. Это функции Ext.firefoxVersion, Ext.ieVersion и т. Д.

Example - Если вы используете браузер Firefox и вызываете метод Ext.ieVersion для получения версии IE, тогда он возвращает 0. Если вы используете тот же метод в браузере IE, он вернет версию, которую вы используете, например 8 , 9 и т. Д.

3

Ext.getVersion()

Эта функция возвращает текущую используемую версию Ext JS.

Example - Если вы вызываете Ext.getVersion (), он возвращает массив значений, таких как версия, короткая версия и т. Д.

Ext.getVersion (). Version возвращает текущую версию Ext JS, используемую в программе, например «4.2.2».

4

Browser related functions

Эти функции возвращают логические значения в зависимости от используемого браузера. Это методы Ext.isIE, Ext.isIE6, Ext.isFF06 и Ext.isChrome.

Example - Если вы используете браузер Chrome, то функция Ext.isChrome вернет все true, в противном случае - false.

5

Ext.typeOf()

Эта функция возвращает тип данных переменной.

Example -

var a = 5;   
var b  = 'hello'; 
Ext.typeOf(a); 
Output – Number 
Ext.typeOf(b);
Output - String
6

DataType related methods - Эти функции возвращают логическое значение в зависимости от типа данных переменной.

Example -

var a = ['a', 'bc'];
var b = 'hello';
var c = 123;
var emptyVariable;
var definedVariable;
function extraFunction(){return true;}
Ext.isArray (а); // возвращает истину
Ext.isString (б); // вернуть истину
Ext.isNumber (c); // вернуть истину
Ext.isEmpty (пустая переменная); // вернуть истину
Ext.isEmpty (б); // возвращаем false
Ext.isDefined (определенная переменная); // вернуть истину
Внешняя функция (extraFunction); // вернуть истину