Ext.js — Обзор

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

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

история

Ext JS 1.1

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

Ext JS 2.0

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

Ext JS 3.0

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

Ext JS 4.0

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

Ext JS 5.0

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

Ext JS 6.0

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

Характеристики

Ниже приведены выделенные функции Ext JS.

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

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

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

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

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

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

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

Код совместимости новых версий со старыми.

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

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

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

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

Выгоды

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

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

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

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

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

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

• Следует архитектуре MVC, поэтому код очень удобочитаемый.

Оптимизирует кросс-платформенную разработку для настольных компьютеров, планшетов и смартфонов — как для современных, так и для устаревших браузеров.

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

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

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

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

Следует архитектуре MVC, поэтому код очень удобочитаемый.

Ограничения

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

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

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

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

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

Размер библиотеки большой, около 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 на вашем компьютере. Пожалуйста, следуйте инструкциям по настройке среды.

Загрузка файлов библиотеки

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

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

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

ext.js

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

Ext-all.js

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

доб-все-debug.js

Это незавершенная версия ext-all.js для отладки.

доб-все-dev.js

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

Ext-all.js

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

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

Файлы CSS. Существует ряд файлов на основе тем, которые вы можете найти в папке \ 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-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, доступных на рынке. Но сейчас мы можем рассмотреть один из следующих —

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

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

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

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

браузер

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

• IE 6 и выше
• Firefox 3.6 и выше
• Chrome10 и выше
• Safari 4 и выше
• Опера 11 и выше

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

Ext.js — Соглашение об именовании

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

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

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

Ext.js — Архитектура

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

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

MVVM — модель представления 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 — это в основном обеспечивает изменения между представлением и моделью. Он связывает данные из модели с представлением. В то же время он не имеет прямого взаимодействия с представлением. У него есть только знание модели.

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

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

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

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

В этой главе перечислены шаги по написанию первой программы 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.define(class name, class members/properties, callback function);

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'
   }]
});

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

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

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

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

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>

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

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>

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

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>

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

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>

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.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>

<!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>

<!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>

<!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>

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

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" }
   ];
});

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'
      },
   }
});

"requires": ["font-pictos"]

iconCls: 'pictos pictos-home'

sencha app build [development]

<!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>

<!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>

<!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>

<!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>

[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"}]