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, - это

Вы можете добавить эти файлы в папку 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 и т. Д.

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.

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

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

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

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

Синтаксис

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

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.

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

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

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

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

Доступные приложения называются 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.

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

Класс Ext.supports

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

Класс Ext.String

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

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

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

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

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

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"

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

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

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

var a = ['a', 'bc'];
var b = 'hello';
var c = 123;
var emptyVariable;
var definedVariable;
function extraFunction(){return true;}