ExtJS — поддержка сторонних библиотек и платформ
В предыдущей статье мы рассматривали библиотеку ExtJS для построения AJAX веб-приложений, а именно — интерфейсов, которые очень похожи на обычные десктопные приложения. Это сближает обычные и веб программы настолько, что зачастую вообще нельзя уже отличить, где что. Да и важно ли это на самом деле?
Но фреймворк не может быть сам по себе, разработчикам необходимо дать возможность легко расширять его функционал, использовать свои любимые среды разработки, со всеми их возможностями. Ну и, конечно, желательна интеграция с различными современными технологиями и платформами, особенно для веб-приложений, где платформ и сред достаточно много. Здесь и Adobe AIR, MS Silverlight, Volta или .NET, GWT и другие. Кстати, заметьте, что какой бы не был совершенный фреймворк, все равно важно, чтобы он мог быть использован параллельно с другими решениями. Иногда необходимо дорабатывать существующий проект, иногда только совместно с другим фреймворком можно покрыть все функциональные требования к проекту. Поэтому дальше мы рассмотрим все возможности совместной работы ExtJS и сторонних разработок.
Адаптеры к другим AJAX-библиотекам
В любом AJAX-фреймворке существует целый ряд основных функций (и функционала) — это и работа с CSS стилями, и работа с DOM-деревом и его узлами, реализация базовыхвизуальных эффектов, взаимодействие с браузером и AJAX-транспорты. Каждый раз, когда кто-то делает фреймворк, он должен реализовывать эти функции. В ExtJS проблема решена комплексно. В основе архитектуры лежит понятие адаптера (adapter), который реализует весь нужный низкоуровневый функционал. Кроме этого, адаптеры служат для обеспечения работы с другими библиотеками, например, если вы подключили адаптер jQuery, и захотите использовать в приложении сторонние компоненты, которые работают с этой библиотекой, то это не вызовет конфликтов. Тогда как если просто подключать все библиотеки (ExtJS и jQuery), это почти всегда заканчивается конфликтами и неработоспособностью приложения.
В дистрибутиве ExtJS включены следующие адаптеры:
- Ext-standalone, это встроенный адаптер самой библиотеки, в случае, если вам не требуется сторонний функционал.
- jQuery — в поставку входит два файла, непосредственно jQuery версии 1.2.3 (можно потом обновить, если выйдет новая версия) и ext-jquery-adapter, сам адаптер.
- Prototype — этот адаптер сам по себе комплексный, так как в самой основе лежит другая библиотека, Script.aculo.us, поверх которой работает Prototype, а уже над ними сверху работает адаптер для ExtJS. Кроме основных функций, он реализует базовые визуальные эффекты (для этого используется расширение Effects для Script.aculo.us).
- YUI — адаптер, использующий компоненты Yahoo! User Interface. Вероятно, самый старый адаптер, так как сам по себе ExtJS «вырос» из именно пакета YUI.
Честно говоря, особо различия в производительности с разными адаптерами я не ощутил, но здесь следует смотреть в каждом конкретном случае отдельно — например, jQuery в последних версиях декларирует существенный прирост быстродействия в операциях с CSS-селекторами и работе с DOM-узлами, а значит, если ваше приложение использует такие возможности, следует посмотреть в сторону использования адаптера для jQuery.
В то же время быстродействие всего приложения может даже ухудшиться, в частности, из-за подключения дополнительных файлов, что увеличивает размер библиотеки еще на 50 — 150 Кб в зависимости от типа адаптера. Поэтому в финальной версии своего приложения постарайтесь минимизировать объем подключаемых файлов, используя либо стандартный адаптер Ext-а (он самый маленький, всего 35 Кб) либо сведите все дополнительные файлы в один общий JS-скрипт, не забывая про правильную очередность.
Еще один момент про быстродействие. Как справедливо замечают, размер библиотеки достаточно большой, вместе со всеми файлами это 600 Кб или даже больше (в случае других адаптеров). Но мало кто знает про способ уменьшения этого размера, часто в несколько раз. Для этого на веб-сайте есть специальный конструктор, позволяющий собрать версию ExtJS под себя. То есть, в нее будут включены только необходимые вам компоненты, ну и базовые, которые нужны в любом случае. Так, размер можно уменьшить достаточно сильно — к примеру, если использовать ее для обычного веб-сайта, для обновления данных, вывода простых окон-предупреждений и других фоновых операций, то объем подключаемого файла может быть сокращен до 110 — 180 Кб (зависит от набора компонент, а также от версии библиотеки). Более подробно можно почитать в моем блоге. А если вручную потом просмотреть этот файл и удалить ненужное, применить сжатие, а потом и архивирование Gzip — размер можно довести до 50 — 90 Кб.
Платформы для веб-приложений
Исходя из своего назначения, ExtJS идеально подходит для разработки веб-приложений и исполнения их в средах, которые в последнее время стремительно развиваются. Под средами я имею ввиду как дополнения к браузерам, вроде Google Gears, так и, собственно, специализированные платформы вроде Adobe AIR. Сюда же можно отнести и такой проект, как Mozilla Prism, но он в данном случае он идентичен браузеру и его стоит рассматривать только как специфический подвид Firefox-а.
Ветка 2.х уже имеет встроенную поддержку среды Adobe AIR как самой прогрессивной и перспективной технологической платформы. В библиотеку включен специальный адаптер для AIR, который позволяет работать со всем функционалом среды через привычные механизмы ExtJS. Можно работать с окнами, использовать звуковую подсистему, взаимодействовать с системным контекстным меню, Drag&Drop а также работать с файловым хранилищем данных.
Интеграция с AIR имеет и еще одно преимущество — такие приложения могут распространяться в виде собранного пакета и устанавливаться на компьютере как обычные программы, в них можно включить все файлы ExtJS, таким образом, для старта приложения нет нужды по сети загружать объемные библиотеки, а только лишь пользовательские данные.
Конечно, пока интеграция не совсем полная, например, нет доступа к встроенной SQL базе данных AIR-а (только хранение данных в файле). Логично предположить, что для этого необходимо добавить новые компоненты в пакет Ext.data, который отвечает за получение и обработку данных, но пока этого еще нет и в этом направлении есть еще много работы и широкое поле для пользовательских расширений сторонних разработчиков.
Ну а первым примером интеграции с AIR, помимо демонстрационного приложения SimpleTask (планировщика задач, просмотреть и загрузить который можно здесь), стало приложение для просмотра документации по API самой библиотеки. К слову, очень удобное и функциональное, а главное, быстрое, что, собственно, и требовалось.
Интеграции с GoogleGears, наверное, основным плагином для реализации платформы веб-приложений в среде браузере, пока в стандартном пакете нет, среди примеров в официальном дистрибутиве есть приложения, которые работают с Gears, но реализуется это через пользовательские расширения. В принципе, дописать или расширить существующий класс доступа к данным (как минимум), займет у квалифицированного разработчика день-два времени. Так что, думаю, достаточно скоро появятся расширенные адаптеры, переносящие часть функциональных возможностей на сторонние среды (один из примеров такой разработки). Например, с GoogleGears пересекаются не только компоненты для доступа к данным, но и некоторые из классов утилит, использующиеся как в других компонентах, так и самостоятельно. Такие классы, как Ext.util.DelayedTask и Ext.util.TaskRunner, служащие для выполнение любых пользовательских задач в фоне или по расписанию, могут быть замещены их аналогом Worker Pool, а возможно и AJAX доступ можно переложить на компонент от Gears. Так что и в эту сторону библиотеку можно развивать еще долго.
Проектирование интерфейса приложений (GUI)
Хотя ExtJS обладает очень мощными компонентами, построение реальных приложений, особенно, когда там много форм или насыщенный интерфейс, только программными средствами достаточно трудоемко и утомительно. Да и не совсем разработчика это дело. Для дизайнера же Ext чересчур сложен и он вряд ли сможет полноценно работать с ним. Поэтому были попытки (и успешные) по созданию визуальной среды для разработки интерфейса.
Лучшей такой средой, которая развивается и поддерживается, является проект ExtJS GUI Designer, расположенный по адресу www.projectspace.nl (автор Sierk Hoeksma в форуме на extjs.com раздает полный дистрибутив приложения). Он позволяет простым перетаскиванием компонент на рабочую панель проектировать все виды интерфейса — формы, окна и панели, меню и тулбары, а также редактировать доступные свойства объектов. На выходе получается готовый конфигурационный JSON-объект, который остается только передать конструктору формы в готовом скрипте — и все, приложение имеет нужный вам внешний вид. Конструктор обладает и рядом мелких, но очень удобных возможностей — показывает примерное время генерации и рендеринга созданной формы, может показать итоговый вид формы в новом окне и позволяет вручную редактировать код (для опытных разработчиков).
Внешне среда очень похожа на популярные RAD-средства, в частности, на Delphi и не должна вызвать сложностей с освоением. Конечно, далеко не все в ней можно сделать, совсем обойтись без ручной правки нельзя, но создать визуальный каркас приложения по силам любому человеку за несколько минут. Да, сам GUI Designer тоже полностью выполнен на ExtJS и может служить отличным примером ее возможностей.
Пользовательские расширения
Библиотека позволяет пользователям создавать собственные компоненты, расширяя функциональность существующих, или же реализуя полностью новые. Для этого выделено отдельное пространство имен — Ext.ux.*, для устранения конфликтов с основными классами. Уже существует достаточно много полезных и мощных компонент, которые собраны в специальном разделе веб-сайта.
Я насчитал уже 32 различные компоненты, от самых простых и тривиальных, вроде Ext.ux.MultiMonthCalendar для одновременного выбора нескольких дат в независимых календарях, до очень полезных и часто необходимых. Например, реализация различных помощников или пошаговых мастеров (Ext.ux.PowerWizard), различных криптографических алгоритмов (Ext.ux.Crypto), расширенная медиа-панель для работы с мультимедийным контентом через Flash (Ext.ux.MediaPanel[.Flash]). Для серьезных корпоративных приложений будут актуальны компоненты для взаимодействия с сервером приложений Domino, системой Lotus Notes или для авторизации в J2EE-приложениях. Как видим, компонент достаточно много, а самые лучшие или востребованные разработчики часто включают в следующие версии библиотеки.
Выводы
Как видим — ExtJS совсем не «вещь в себе», она позволяет гибко взаимодействовать с сторонними библиотеками, отлично работает на современных платформах для веб-приложений, поддерживая их расширенные возможности. Именно интеграция с Adobe AIR позволяет действительно разрабатывать веб-приложения, получая красивый интерфейс, широкие функциональные возможности и отличное быстродействие. ExtJS также чутко реагирует на потребности комьюнити, поддерживая сторонних разработчиков, желающих создавать свои компоненты. Теперь дело за вами — создавайте, разрабатывайте, творите!
Все про українське ІТ в телеграмі — підписуйтеся на канал DOU
Подобається Сподобалось 0
До обраного В обраному 0
Ext JS
Ext JS — библиотека JavaScript для разработки веб-приложений и пользовательских интерфейсов, изначально задуманная как расширенная версия Yahoo! UI Library, однако преобразовавшаяся затем в отдельный фреймворк. До версии 4.0 использовала адаптеры для доступа к библиотекам Yahoo! UI Library, jQuery или Prototype/script.aculo.us, начиная с 4-ой версии адаптеры отсутствуют. Поддерживает технологию AJAX, анимацию, работу с DOM, реализацию таблиц, вкладок, обработку событий и все остальные новшества Web 2.0.
С версии 2.1 библиотека Ext JS предусматривает двойное лицензирование: может быть поставлена по лицензии GPL v3, либо по коммерческой лицензии компании Sencha.
Начиная с версии Ext JS 3.0 библиотека разбивается на две части: Ext Core (набор JavaScript-функций, позволяющий создавать динамические веб-страницы с унификацией обработки в различных браузерах и распространяемый по MIT-лицензии) и Ext JS (собственно набор виджетов для создания пользовательских интерфейсов с двойным лицензированием по GPL v3 или по коммерческой лицензии).
Компания, разрабатывающая и поддерживающая фреймворк Ext JS первоначально носила наименование Ext, LLC. до 14 июня 2010 года разработчики jQTouch и Raphaël присоединились к компании Ext LLC, и компания сменила наименование на Sencha, Inc. [1] , а Ext JS, сохранив своё название, стал одним из продуктов обновлённой компании.
См. также
Примечания
Ссылки
- sencha.com/products/extjs — официальный сайт Ext JS
- sencha.com — официальный сайт Sencha, Inc. − компании-разработчика фреймворка Ext JS
- Найти и оформить в виде сносок ссылки на авторитетные источники, подтверждающие написанное.
Введение в Ext JS 4
Ext JS представляет собой библиотеку JavaScript для разработки веб-приложений и пользовательских интерфейсов. И прежде всего Ext JS предназначен для создания RIA-приложений, то есть таких интернет-приложений, которые отличаются богатым и насыщенным интерфейсом.
Ext JS помогает организовывать и управлять элементами на веб-странице и проводить более точную и эффективную их настройку. Причем данный фреймворк позволяет не только эффективно работать с элементами управления, но и с некоторыми графическими моментами, например, с диаграммами.
Возможности, предоставляемые данным фреймворком, позволяют применять к веб-приложениям шаблон MVC, который позволяет отделить логику приложения, и его данные от визуальной части.
Еще одной важной чертой фреймворка является кроссбраузерность. В настоящее время Ext JS поддерживается следующими версиями браузеров:
- Internet Explorer 6+
- Firefox 3.6+ (PC, Mac)
- Safari 4+
- Chrome 10+
- Opera 11+ (PC, Mac)
Кроме того, Ext JS постоянно развивается и совершенствуется. Текущая версия, выпущенная в 2011 — четвертая. А если говорить о подверсиях, то текущая стабильная версия на момент написания этой статья — Ext JS 4.1.1 (выпущена в июле 2012 года).
Установка Ext JS 4
Чтобы начать работать с Ext JS, весь пакет фреймворка (SDK Ext JS) надо загрузить с официального сайта разработчиков библиотеки — http://www.sencha.com/products/extjs/.
На момент написания этой главы доступна версия 4.2, которая и будет использоваться в дальнейшем.
Поскольку при работе с запросами ajax браузеры, как правило, не работают с локальными файлами, то рекомендуется развернуть фреймворк на веб-сервере. В качестве веб-сервера можно взять Apache или IIS. Поэтому после загрузки архива распакуйте его в корневую папку веб-сервера и назовите распакованную папку со всеми файлами extjs. Хотя ряд примеров и приложении можно запускать и с локального диска по протоколу file .
Корневая папка веб-сервера зависит от ОС и выбранного веб-сервера.
Например, для сервера Apache это может быть:
- Windows — C:\Program Files\Apache Software Foundation\Apache2.2\htdocs
- Linux — /var/www/
- Mac OS X — /Library/WebServer/Documents/
В IIS корневой папкой выступает C:\inetpub\wwwroot.
После распаковки можно проверить правильность установки фреймворка, запустив веб-сервер и перейдя в браузере по адресу http://localhost/extjs/index.html.
Поскольку не всегда удобно создавать файлы в каталогах веб-сервера, то для тестирования можно использовать браузер Mozilla Firefox, который позволяет запустить веб-страницы с ExtJS 4 и с других каталогов, а не обязательно каталогов веб-сервера. Хотя в этом случае опять е не все функции, например, AJAX, могут быть доступны.
Краткий обзор Ext JS 4 SDK
В корневой папке библиотеки (которую мы ранее назвали extjs) будет располагаться несколько файлов и папок:
- ext-all.js — этот файл включает весь фреймворк Ext JS
- ext.js — этот файл содержит минимальный код фреймворка Ext JS
При разработке нового приложения с использованием фреймворка мы прежде всего добавим ссылки на файлы Ext JS на html-странице. Если мы выберем файл ext-all.js, то браузер при вызове кода фреймворка будет подгружать всю библиотеку Ext JS.
А в случае выбора файла ext.js браузер будет подгружать только минимально необходимый код для выполнения приложения. Поэтому выбор этого файла рекомендуется для разработки и тестирования. Но при развертывании приложения все же рекомендуется использовать полную версию фреймворка — ext-all.js.
Эти файлы содержат ряд версий. В частности:
В отличие от своих двойников файлы ext-all.js и ext.js являются минимизированныеми. Поэтому они более удобны при развертывании приложения.
Директории фреймворка Ext JS:
- docs. Содержит полную документацию по фреймворку
- examples. Содержит примеры использования компонентов Ext JS
- locale. Содержит переводы компонентов на другие языки
- resources. Включает файлы css и изображений и тем, используемые фреймворком
- src. Содержит весь исходный код Ext JS
- builds. Содержит дополнительные файлы фреймворка Ext JS
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, —
Это основной файл, который содержит все функции для запуска приложения.
Этот файл содержит весь свернутый код без комментариев в файле.
доб-все-debug.js
Это незавершенная версия ext-all.js для отладки.
доб-все-dev.js
Этот файл также не минимизирован и используется для целей разработки, так как содержит все комментарии и журналы консоли для проверки любых ошибок / проблем.
Этот файл используется в основном для производственных целей, так как он намного меньше, чем любой другой.
Это основной файл, который содержит все функции для запуска приложения.
Этот файл содержит весь свернутый код без комментариев в файле.
доб-все-debug.js
Это незавершенная версия ext-all.js для отладки.
доб-все-dev.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.
rel = "stylesheet" type = "text/css" href = "..\ext-6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css" /> type = "text/javascript" src = "..\ext-6.0.1-trial\ext-6.0.1\build\ext-all.js" > type = "text/javascript" src = "app.js" >
Вы сохраните код приложения ExtJS в файле app.js.
Настройка CDN
CDN — это сеть доставки контента, по которой вам не нужно загружать файлы библиотеки Ext JS, вместо этого вы можете напрямую добавить ссылку CDN для ExtJS в вашу программу следующим образом:
Популярные редакторы
Поскольку это 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 и т. Д.
название | условность |
---|---|
Имя класса | Он должен начинаться с заглавной буквы, за которой следует верблюд. Например, студент |
Название метода | Он должен начинаться со строчной буквы, за которой следует верблюжий регистр. Например, doLayout () |
Имя переменной | Он должен начинаться со строчной буквы, за которой следует верблюжий регистр. Например, firstName |
Имя константы | Это должно быть только в верхнем регистре. Например, COUNT, MAX_VALUE |
Имя свойства | Он должен начинаться со строчной буквы, за которой следует верблюжий регистр. Например, enableColumnResize = true |
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 с помощью тега . Приложение вызывает контроллер приложения для остальной функциональности.
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
объяснение
- Метод Ext.onReady () будет вызван, когда Ext JS будет готов для рендеринга элементов Ext JS.
- Метод Ext.create () используется для создания объекта в Ext JS. Здесь мы создаем объект простой панели класса Ext.Panel.
- Ext.Panel — это предопределенный класс в Ext JS для создания панели.
- Каждый класс Ext JS имеет разные свойства для выполнения некоторых основных функций.
Метод Ext.onReady () будет вызван, когда Ext JS будет готов для рендеринга элементов Ext JS.
Метод Ext.create () используется для создания объекта в Ext JS. Здесь мы создаем объект простой панели класса Ext.Panel.
Ext.Panel — это предопределенный класс в Ext JS для создания панели.
Каждый класс Ext JS имеет разные свойства для выполнения некоторых основных функций.
Класс Ext.Panel имеет различные свойства, такие как —
- renderTo — это элемент, где эта панель должна отображаться. «helloWorldPanel» — это идентификатор div в файле Index.html.
- Свойства высоты и ширины предназначены для настройки размера панели.
- Свойство title должно предоставлять заголовок панели.
- Свойство Html — это содержимое HTML, которое будет отображаться на панели.
renderTo — это элемент, где эта панель должна отображаться. «helloWorldPanel» — это идентификатор div в файле Index.html.
Свойства высоты и ширины предназначены для настройки размера панели.
Свойство title должно предоставлять заголовок панели.
Свойство Html — это содержимое HTML, которое будет отображаться на панели.
Шаг 2
Откройте файл index.htm в стандартном браузере, и вы получите следующий вывод в браузере.
Ext.js — система классов
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
Mixins — это другой способ использования класса A в классе B без расширения.
mixins : < commons : 'DepartmentApp.utils.DepartmentUtils' >,
Миксины добавляются в контроллер, где мы объявляем все другие классы, такие как store, view и т. Д. Таким образом, мы можем вызывать класс DepartmentUtils и использовать его функции в контроллере или в этом приложении.
Ext.js — Контейнеры
Контейнер в Ext JS — это компонент, в который мы можем добавить другие контейнерные или дочерние компоненты. Эти контейнеры могут иметь несколько макетов для размещения компонентов в контейнерах. Мы можем добавлять или удалять компоненты из контейнера и его дочерних элементов. Ext.container.Container является базовым классом для всех контейнеров в Ext JS.
В этом примере показано, как определить компоненты внутри контейнера.
В этом примере показано, как определить контейнер внутри контейнера с другими компонентами.
В этом примере показано, как определить компоненты внутри контейнера.
В этом примере показано, как определить контейнер внутри контейнера с другими компонентами.
Существуют различные типы контейнеров Ext.panel.Panel, Ext.form.Panel, Ext.tab.Panel и Ext.container.Viewport, которые часто используются в Ext JS. Ниже приведен пример, который показывает, как использовать эти контейнеры.
В этом примере показан контейнер Ext.panel.Panel.
В этом примере показан контейнер Ext.form.Panel.
В этом примере показан контейнер Ext.tab.Panel.
В этом примере показан контейнер Ext.container.Viewport.
В этом примере показан контейнер Ext.panel.Panel.
В этом примере показан контейнер Ext.form.Panel.
В этом примере показан контейнер Ext.tab.Panel.
В этом примере показан контейнер Ext.container.Viewport.
Ext.js — Макеты
Компоновка — это способ расположения элементов в контейнере. Он может быть горизонтальным, вертикальным или любым другим. Ext JS имеет другой макет, определенный в его библиотеке, но мы всегда можем также написать собственные макеты.
Этот макет позволяет позиционировать элементы, используя координаты XY в контейнере.
Этот макет позволяет размещать все элементы в стеке (один поверх другого) внутри контейнера.
Этот макет дает пользователю право указывать размер каждого элемента по отношению к размеру контейнера.
В этом макете различные панели вложены и разделены границами.
Это макет по умолчанию, который определяет расположение элементов на основе количества элементов.
Этот макет упорядочивает различные компоненты в виде вкладок. Вкладки будут отображаться в верхней части контейнера. Каждый раз, когда видна только одна вкладка, и каждая вкладка рассматривается как отдельный компонент.
В этом макете каждый раз элементы приходят для полного пространства контейнера. В мастере есть нижняя панель инструментов для навигации.
Этот макет предназначен для отображения нескольких столбцов в контейнере. Мы можем определить фиксированную или процентную ширину столбцов. Процентная ширина будет рассчитываться на основе полного размера контейнера.
В этом макете контейнер заполнен одной панелью. Когда нет конкретного требования, связанного с макетом, используется этот макет.
Как следует из названия, эта компоновка размещает компоненты в контейнере в формате таблицы HTML.
Этот макет позволяет распределять элемент по вертикали. Это один из наиболее используемых макетов.
Этот макет позволяет распределять элемент по горизонтали.
Этот макет позволяет позиционировать элементы, используя координаты XY в контейнере.
Этот макет позволяет размещать все элементы в стеке (один поверх другого) внутри контейнера.
Этот макет дает пользователю право указывать размер каждого элемента по отношению к размеру контейнера.
В этом макете различные панели вложены и разделены границами.
Это макет по умолчанию, который определяет расположение элементов на основе количества элементов.
Этот макет упорядочивает различные компоненты в виде вкладок. Вкладки будут отображаться в верхней части контейнера. Каждый раз, когда видна только одна вкладка, и каждая вкладка рассматривается как отдельный компонент.
В этом макете каждый раз элементы приходят для полного пространства контейнера. В мастере есть нижняя панель инструментов для навигации.
Этот макет предназначен для отображения нескольких столбцов в контейнере. Мы можем определить фиксированную или процентную ширину столбцов. Процентная ширина будет рассчитываться на основе полного размера контейнера.
В этом макете контейнер заполнен одной панелью. Когда нет конкретного требования, связанного с макетом, используется этот макет.
Как следует из названия, эта компоновка размещает компоненты в контейнере в формате таблицы HTML.
Этот макет позволяет распределять элемент по вертикали. Это один из наиболее используемых макетов.
Этот макет позволяет распределять элемент по горизонтали.
Ext.js — Компоненты
Пользовательский интерфейс ExtJS состоит из одного или нескольких виджетов, называемых Компонентами. В Ext Js определены различные компоненты пользовательского интерфейса, которые можно настроить в соответствии с вашими требованиями.
Компонент сетки может использоваться для отображения данных в табличном формате.
Форма виджета предназначена для получения данных от пользователя.
Окно сообщения в основном используется для отображения данных в виде окна предупреждения.
Графики используются для представления данных в графическом формате.
Подсказка используется, чтобы показать некоторую основную информацию, когда происходит какое-либо событие.
Этот виджет UI предназначен для создания окна, которое должно появляться при возникновении любого события.
HTML Editor — один из очень полезных компонентов пользовательского интерфейса, который используется для стилизации данных, вводимых пользователем, с точки зрения шрифтов, цвета, размера и т. Д.
Показывает ход работы бэкэнда.
Компонент сетки может использоваться для отображения данных в табличном формате.
Форма виджета предназначена для получения данных от пользователя.
Окно сообщения в основном используется для отображения данных в виде окна предупреждения.
Графики используются для представления данных в графическом формате.
Подсказка используется, чтобы показать некоторую основную информацию, когда происходит какое-либо событие.
Этот виджет UI предназначен для создания окна, которое должно появляться при возникновении любого события.
HTML Editor — один из очень полезных компонентов пользовательского интерфейса, который используется для стилизации данных, вводимых пользователем, с точки зрения шрифтов, цвета, размера и т. Д.
Показывает ход работы бэкэнда.
Ext.js — Drag and Drop
Функция перетаскивания является одной из мощных функций, добавленных для облегчения задачи разработчика. По сути, операция перетаскивания — это жест щелчка на каком-либо элементе пользовательского интерфейса, в то время как кнопка мыши удерживается нажатой, а мышь перемещается. Операция удаления происходит, когда кнопка мыши отпускается после операции перетаскивания.
Синтаксис
Добавление класса drag and drop для перетаскиваемых целей.
var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', < isTarget: false >);
Добавление перетаскивания целевого класса к перетаскиваемой цели.
var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', < ignoreSelf: false >);
пример
Ниже приведен простой пример.
#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
Вышеуказанная программа даст следующий результат —
С помощью перетаскивания в Extjs мы можем перемещать данные из сетки в сетку и из сетки в форму. Ниже приведены примеры перемещения данных между сетками и формами.
Ext.js — Темы
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
Чтобы увидеть эффект, попробуйте следующую программу.
Вышеуказанная программа даст следующий результат —
Свежая тема
Рассмотрим ваше самое первое приложение 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
Чтобы увидеть эффект, попробуйте следующую программу.
Вышеуказанная программа даст следующий результат —
Тритон Тема
Рассмотрим ваше самое первое приложение 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
Чтобы увидеть эффект, попробуйте следующую программу.
Вышеуказанная программа даст следующий результат —
Серая тема
Рассмотрим ваше самое первое приложение Hello World. Удалите следующий CSS из приложения.
https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css
Добавьте следующий CSS, чтобы использовать тему Grey.
https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css
Чтобы увидеть эффект, попробуйте следующую программу.
Вышеуказанная программа даст следующий результат —
Ext.js — Custom Events и слушатели
События — это то, что срабатывает, когда что-то происходит с классом. Например, когда кнопка нажата или до / после рендеринга элемента.
Методы написания событий
- Встроенные события с использованием слушателей
- Присоединение событий позже
- Пользовательские события
Встроенные события с использованием слушателей
Ext JS предоставляет свойство слушателя для записи событий и пользовательских событий в файлах Ext JS.
Написание слушателя в Ext JS
Мы добавим слушателя в предыдущую программу, добавив свойство listen на панель.
Please click the button to see event listener
Вышеуказанная программа даст следующий результат —
Таким образом, мы также можем написать несколько событий в свойстве слушателей.
Несколько событий в одном слушателе
Please click the button to see event listener.The button was clicked and now it is hidden.
Присоединение события позже
В предыдущем методе записи событий мы записывали события в слушатели во время создания элементов. Другой способ — прикрепить события.
Please click the button to see event listener
Вышеуказанная программа даст следующий результат —
Пользовательские события
Мы можем написать пользовательские события в Ext JS и запустить события с помощью метода fireEvent. В следующем примере объясняется, как писать пользовательские события.
The event will be called after 5 seconds when the page is loaded.
Как только страница загружена и документ готов, появится страница пользовательского интерфейса с кнопкой, и когда мы запускаем событие через 5 секунд, документ готов. Окно предупреждения появится через 5 секунд.
Здесь мы записали пользовательское событие myEvent и запускаем события как button.fireEvent (eventName);
Ext.js — Данные
Пакет данных используется для загрузки и сохранения всех данных в приложении.
Пакет данных имеет множество классов, но наиболее важные классы —
модель
Базовый класс для модели — Ext.data.Model . Он представляет сущность в приложении. Он связывает данные магазина для просмотра. Он имеет отображение объектов данных бэкэнда в представление dataIndex. Данные извлекаются с помощью магазина.
Создание модели
Для создания модели нам нужно расширить класс Ext.data.Model, а также определить поля, их имя и отображение.
Ext.define('StudentDataModel', < extend: 'Ext.data.Model', fields: [ , , ] >);
Здесь имя должно совпадать с 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 data и службы Rest.
Определение прокси на сервере
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 — Шрифты
Ext.js предоставляет возможность использовать различные пакеты шрифтов. Пакеты шрифтов используются для добавления различных классов для значков, доступных в пакете.
- Font-Потрясающие
- Font-Pictos
Font-Потрясающие
Новая тема ExtJS, Triton, имеет встроенное семейство шрифтов font-awesome, включенное в сам фреймворк, поэтому нам не требуется никаких явных требований к таблице шрифтов-awesome.
Ниже приведен пример использования классов Font-Awesome в теме Triton.
Когда мы используем любую другую тему, кроме Triton, нам нужно или требуется явно добавить таблицу стилей для font-awesome.
Ниже приведен пример использования классов Font-Awesome без темы Triton.
Font-Pictos
Font-pictos не входит в структуру ExtJS, поэтому мы должны требовать того же. Только лицензированные пользователи Sencha смогут использовать font-pictos.
Шаги, чтобы добавить Font-Pictos
Шаг 1 — Требуется класс font-pictos с помощью следующей команды.
"requires": ["font-pictos"]
Шаг 2 — Теперь добавьте классы пиктограмм как —
iconCls: 'pictos pictos-home'
Ext.js — Стиль
Стиль приложения относится к пользовательской настройке внешнего вида компонентов. Эти настройки могут включать в себя: цвет, цветовые градиенты, шрифт, поля / отступы и т. Д. В 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.
$ базового цвета
$ base-color: color (например, $ base-color: # 808080)
Этот базовый цвет должен использоваться по всей теме.
$ базового градиента
$ base-градиент: строка (например, $ base-градиент: ‘матовый’)
Этот базовый градиент должен использоваться по всей теме.
$ тела цвет фона
$ body-background-color: color (например, $ body-background-color: # 808080)
Цвет фона для применения к элементу тела. Если установлено прозрачное или «нет», стиль элемента фона не будет установлен для элемента body.
$ color: color (например, $ color: # 808080)
Этот цвет текста по умолчанию должен использоваться во всей теме.
$ семейство шрифтов
$ font-family: string (например, $ font-family: arial)
Это семейство шрифтов по умолчанию должно использоваться во всей теме.
$ размер шрифта
$ font-size: number (например, $ font-size: 9px)
Этот размер шрифта по умолчанию должен использоваться во всей теме.
$ начертание шрифта
$ font-weight: string / number (например, $ font-weight: normal)
Этот шрифт по умолчанию используется для всей темы.
$ начертание шрифта, полужирный
$ font-weight-bold: строка / число (например, $ font-weight-bold: полужирный)
Этот шрифт по умолчанию для жирного шрифта должен использоваться по всей теме.
$ включают хром
$ include-chrome: boolean (например, $ include-chrome: true)
Правда включать в Chrome специфичные правила.
$ включают-Ф.Ф.
$ include-ff: boolean (например, $ include-ff: true)
Правда включать в Firefox определенные правила.
$ включают, т.е.
$ include-ie: boolean (например, $ include-ie: true)
Правда, чтобы включить специальные правила Internet Explorer для IE9 и ниже.
$ включают-оперу
$ include-opera: boolean (например, $ include-opera: true)
Правда, чтобы включить определенные правила Opera.
$ включать-сафари
$ include-safari: boolean (например, $ include-safari: true)
Правда, чтобы включить определенные правила Opera.
$ включают WebKit-
$ include-webkit: boolean (например, $ include-webkit: true)
Правда, чтобы включить определенные правила Webkit.
$ базового цвета
$ base-color: color (например, $ base-color: # 808080)
Этот базовый цвет должен использоваться по всей теме.
$ базового градиента
$ base-градиент: строка (например, $ base-градиент: ‘матовый’)
Этот базовый градиент должен использоваться по всей теме.
$ тела цвет фона
$ body-background-color: color (например, $ body-background-color: # 808080)
Цвет фона для применения к элементу тела. Если установлено прозрачное или «нет», стиль элемента фона не будет установлен для элемента body.
$ color: color (например, $ color: # 808080)
Этот цвет текста по умолчанию должен использоваться во всей теме.
$ семейство шрифтов
$ font-family: string (например, $ font-family: arial)
Это семейство шрифтов по умолчанию должно использоваться во всей теме.
$ размер шрифта
$ font-size: number (например, $ font-size: 9px)
Этот размер шрифта по умолчанию должен использоваться во всей теме.
$ начертание шрифта
$ font-weight: string / number (например, $ font-weight: normal)
Этот шрифт по умолчанию используется для всей темы.
$ начертание шрифта, полужирный
$ font-weight-bold: строка / число (например, $ font-weight-bold: полужирный)
Этот шрифт по умолчанию для жирного шрифта должен использоваться по всей теме.
$ включают хром
$ include-chrome: boolean (например, $ include-chrome: true)
Правда включать в Chrome специфичные правила.
$ включают-Ф.Ф.
$ include-ff: boolean (например, $ include-ff: true)
Правда включать в Firefox определенные правила.
$ включают, т.е.
$ include-ie: boolean (например, $ include-ie: true)
Правда, чтобы включить специальные правила Internet Explorer для IE9 и ниже.
$ включают-оперу
$ include-opera: boolean (например, $ include-opera: true)
Правда, чтобы включить определенные правила Opera.
$ включать-сафари
$ include-safari: boolean (например, $ include-safari: true)
Правда, чтобы включить определенные правила Opera.
$ включают WebKit-
$ include-webkit: boolean (например, $ include-webkit: true)
Правда, чтобы включить определенные правила Webkit.
Ext.js — Рисование
Пакет для рисования в ExtJS позволяет рисовать графику общего назначения. Это может быть использовано для графики, которая работает во всех браузерах и мобильных устройствах.
Эта графика используется для создания формы циркара.
Эта графика используется для создания прямоугольной формы.
Эта графика используется для создания формы дуги.
Эта графика используется для создания формы эллипса.
Эта графика используется для создания формы эллиптической дуги.
Эта графика используется для добавления изображения в ваше приложение.
Эта графика используется для создания свободного пути.
Эта графика используется для добавления любого текста в ваше приложение.
Это свойство используется для перемещения начальной точки в вашем контейнере после визуализации графики. Может использоваться с любой графикой.
Это свойство используется для добавления поворота к добавленному рисунку. Может использоваться с любой графикой.
Этот рисунок используется для создания квадрата.
Эта графика используется для создания формы циркара.
Эта графика используется для создания прямоугольной формы.
Эта графика используется для создания формы дуги.
Эта графика используется для создания формы эллипса.
Эта графика используется для создания формы эллиптической дуги.
Эта графика используется для добавления изображения в ваше приложение.
Эта графика используется для создания свободного пути.
Эта графика используется для добавления любого текста в ваше приложение.
Это свойство используется для перемещения начальной точки в вашем контейнере после визуализации графики. Может использоваться с любой графикой.
Это свойство используется для добавления поворота к добавленному рисунку. Может использоваться с любой графикой.
Этот рисунок используется для создания квадрата.
Ext.js — Локализация
Всегда лучше общаться с пользователями на языке, который они понимают и предпочитают. Пакет локализации Extjs поддерживает более 40 языков, таких как немецкий, французский, корейский, китайский и т. Д. Локализацию в ExtJs очень просто реализовать. Вы найдете все связанные языковые файлы в папке переопределения пакета ext-locale. Файлы локали просто переопределяют, что говорит Ext JS заменить английские значения по умолчанию для некоторых компонентов.
Следующая программа должна показать месяц в другой локали, чтобы увидеть эффект. Попробуйте следующую программу.
Вышеуказанная программа даст следующий результат
Для использования другого языкового стандарта, отличного от английского, нам нужно добавить файл, соответствующий конкретному языковому стандарту, в нашей программе. Здесь мы используем 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 для корейского и т. Д.
Следующая программа должна показать средство выбора даты в корейском языке, чтобы увидеть эффект. Попробуйте следующую программу.
Вышеуказанная программа даст следующий результат —
В следующей таблице перечислены несколько локалей, доступных в ExtJS, и URL локали основного файла, который необходимо изменить.
место действия | язык | URL локали |
---|---|---|
ко | корейский язык | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js |
фр | Французский | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js |
эс | испанский | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js |
JA | японский язык | 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 |
RU | русский | 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 |
Ext.js — Доступность
В целом доступность означает доступность, контент доступен, значит контент доступен.
С точки зрения программного обеспечения, приложение доступно, значит, приложение доступно для всех. Здесь все означает людей с ограниченными возможностями, слабовидящих или тех, кто использует программы чтения с экрана, чтобы использовать компьютер, или тех, кто предпочитает ориентироваться, используя клавиатуру вместо мыши. навигация с помощью клавиатуры вместо мыши.
Доступные приложения называются ARIA (Accessible Rich Internet Applications).
Доступность в Ext JS
Ext JS разработан для того, чтобы помнить, что он должен работать со всеми клавиатурными переходами. Он имеет встроенную функцию индексации вкладок и возможность фокусировки, и он всегда включен по умолчанию, поэтому нам не нужно добавлять какое-либо свойство для включения этой функции.
Эта функциональность позволяет всем компонентам с клавиатурой взаимодействовать с пользователем при вкладке в. Например, мы можем использовать вкладку для перехода к следующему компоненту вместо мыши. Таким же образом, мы можем использовать Shift + Tab для перемещения назад и использовать Enter на клавиатуре, чтобы щелкнуть и т. Д.
Фокус Стиль и вкладки
Фокус встроен в Extjs при использовании нажатия клавиш для табуляции.
В следующем примере показано, как меняется стиль, когда фокус изменяется с помощью вкладок.
Please click the button to see event listener:
Чтобы увидеть эффект, используйте вкладку для перехода от следующей кнопки и Shft + Tab для фокусировки назад. Используйте ввод и посмотрите, как всплывет предупреждение, связанное с данной кнопкой.
Ария Тема
ExtJS предоставляет тему арии для слабовидящих.
Следующий пример показывает тему арии, которая легко доступна для слабовидящих.
Вышеуказанная программа даст следующий результат. Вы можете использовать клавиши перемещения и мыши вверх и вниз для перемещения фокуса по сетке, и тема в основном для людей с нарушениями зрения.
Ext.js — отладка кода Ext JS
Любой код 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 () в код и увидеть значение журнала, который будет напечатан в консоли инструмента разработки.
- Второй способ — использование точек останова в инструменте разработки. Ниже приводится процесс.
- Откройте файл во всех доступных сценариях под тегом script.
- Теперь поместите точку останова на строку, которую вы хотите отладить.
- Запустите приложение в браузере.
- Теперь, когда поток кода достигнет этой строки, он будет нарушать код и оставаться там до тех пор, пока пользователь не выполнит код с помощью клавиш F6 (перейти к следующей строке кода), F7 (перейти в функцию) или F8 (перейти до следующей точки останова или запустите код, если точек останова больше нет) в зависимости от потока, который вы хотите отладить.
- Вы можете выбрать переменную или функцию, значение которой вы хотите увидеть.
- Вы можете использовать консоль, чтобы проверить значение или проверить некоторые изменения в самом браузере.
Первый способ — это поместить console.log () в код и увидеть значение журнала, который будет напечатан в консоли инструмента разработки.
Второй способ — использование точек останова в инструменте разработки. Ниже приводится процесс.
Откройте файл во всех доступных сценариях под тегом script.
Теперь поместите точку останова на строку, которую вы хотите отладить.
Запустите приложение в браузере.
Теперь, когда поток кода достигнет этой строки, он будет нарушать код и оставаться там до тех пор, пока пользователь не выполнит код с помощью клавиш F6 (перейти к следующей строке кода), F7 (перейти в функцию) или F8 (перейти до следующей точки останова или запустите код, если точек останова больше нет) в зависимости от потока, который вы хотите отладить.
Вы можете выбрать переменную или функцию, значение которой вы хотите увидеть.
Вы можете использовать консоль, чтобы проверить значение или проверить некоторые изменения в самом браузере.
Ext.js — Методы
Ниже приведены несколько встроенных функций, которые интенсивно используются в Ext JS.
Ext.is Class
Этот класс проверяет платформу, которую вы используете, будь то телефон или компьютер, операционная система Mac или Windows. Это следующие методы, относящиеся к классу Ext.is.
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">]
Ext.is.Android
Эта функция вернет true, если вы используете операционную систему Android, иначе она возвращает false.
Ext.is.Desktop
Эта функция вернет true, если вы используете рабочий стол для приложения, иначе она возвращает false.
Эта функция вернет true, если вы используете мобильный телефон, иначе она возвращает false.
Ext.is.iPhone
Эта функция вернет true, если вы используете iPhone, иначе она возвращает false.
Эта функция вернет true, если вы используете iPod, иначе она возвращает false.
Эта функция вернет true, если вы используете iPad, иначе она возвращает false.
Ext.is.Windows
Эта функция вернет true, если вы используете операционную систему Windows, иначе она возвращает false.
Эта функция вернет true, если вы используете операционную систему Linux, иначе она возвращает false.
Ext.is.Blackberry
Эта функция вернет true, если вы используете Blackberry, иначе она возвращает false.
Эта функция вернет true, если вы используете операционную систему Mac, иначе она возвращает false.
Ext.is.Platforms
Эта функция возвращает платформу, доступную для этой версии.
Например, когда вы запускаете следующую функцию, она возвращает что-то вроде этого —
Ext.is.Android
Эта функция вернет true, если вы используете операционную систему Android, иначе она возвращает false.
Ext.is.Desktop
Эта функция вернет true, если вы используете рабочий стол для приложения, иначе она возвращает false.
Эта функция вернет true, если вы используете мобильный телефон, иначе она возвращает false.
Ext.is.iPhone
Эта функция вернет true, если вы используете iPhone, иначе она возвращает false.
Эта функция вернет true, если вы используете iPod, иначе она возвращает false.
Эта функция вернет true, если вы используете iPad, иначе она возвращает false.
Ext.is.Windows
Эта функция вернет true, если вы используете операционную систему Windows, иначе она возвращает false.
Эта функция вернет true, если вы используете операционную систему Linux, иначе она возвращает false.
Ext.is.Blackberry
Эта функция вернет true, если вы используете Blackberry, иначе она возвращает false.
Эта функция вернет true, если вы используете операционную систему Mac, иначе она возвращает false.
Класс Ext.supports
Как видно из названия, этот класс предоставляет информацию, если функция поддерживается текущей средой браузера / устройства или нет.
Ext.supports.History
Он проверяет, поддерживает ли устройство историю HTML 5 как window.history или нет. Если устройство поддерживает историю, оно возвращает true , иначе false.
Ext.supports.GeoLocation
Он проверяет, поддерживает ли устройство метод геолокации или нет. Внутренне он проверяет метод navigator.geolocation.
Ext.supports.Svg
Он проверяет, поддерживает ли устройство HTML 5 функцию масштабируемой векторной графики (svg) или нет. Внутренне он проверяет наличие doc.createElementNS && !! doc.createElementNS («http: /» + «/www.w3.org/2000/svg», «svg»). CreateSVGRect.
Ext.supports.Canvas
Он проверяет, поддерживает ли устройство холст функции HTML 5 для рисования или нет. Внутренне он проверяет doc.createElement (‘canvas’). GetContext и возвращает значение, основанное на выводе этого метода.
Ext.supports.Range
Он проверяет, поддерживает ли браузер метод document.createRange или нет.
Ext.supports.History
Он проверяет, поддерживает ли устройство историю HTML 5 как window.history или нет. Если устройство поддерживает историю, оно возвращает true , иначе false.
Ext.supports.GeoLocation
Он проверяет, поддерживает ли устройство метод геолокации или нет. Внутренне он проверяет метод navigator.geolocation.
Ext.supports.Svg
Он проверяет, поддерживает ли устройство HTML 5 функцию масштабируемой векторной графики (svg) или нет. Внутренне он проверяет наличие doc.createElementNS && !! doc.createElementNS («http: /» + «/www.w3.org/2000/svg», «svg»). CreateSVGRect.
Ext.supports.Canvas
Он проверяет, поддерживает ли устройство холст функции HTML 5 для рисования или нет. Внутренне он проверяет doc.createElement (‘canvas’). GetContext и возвращает значение, основанное на выводе этого метода.
Ext.supports.Range
Он проверяет, поддерживает ли браузер метод document.createRange или нет.
Ext.String Class
Класс Ext.String имеет различные методы для работы со строковыми данными. Наиболее используемые методы — это кодирование, декодирование, обрезка, переключение, urlAppend и т. Д.
Функция кодирования и декодирования — это функции, доступные в классе Ext.String для кодирования и декодирования значений HTML.
Ext.String.htmlEncode
Эта функция используется для кодирования значения html для его анализа.
Ext.String.htmlDecode
Эта функция используется для декодирования закодированного значения html.
Ext.String.trim
Эта функция предназначена для обрезки ненужного пространства в строке.
Ext.String.urlAppend
Этот метод используется для добавления значения в строку URL.
Ext.String.toggle
Эта функция предназначена для переключения значений между двумя разными значениями.
Ext.userAgent ()
Эта функция предоставляет информацию о браузере userAgent. UserAgent предназначен для идентификации браузера и операционной системы на веб-сервере.
Пример — если вы работаете в Mozilla, он возвращает что-то вроде: «mozilla / 5.0 (windows nt 6.1; wow64; rv: 43.0) gecko / 20100101 firefox / 43.0»
Функция, связанная с версией
Эта функция возвращает версию используемого в данный момент браузера, если эта функция вызывается в связи с IE. В браузере Firefox он возвращает 0. Это функции Ext.firefoxVersion, Ext.ieVersion и т. Д.
Пример. Если вы используете браузер Firefox и вызываете метод Ext.ieVersion для извлечения версии IE, он возвращает 0. Если вы используете тот же метод в браузере IE, то он вернет версию, которую вы используете, такую как 8, 9 и т. Д.
Ext.getVersion ()
Эта функция возвращает текущую используемую версию Ext JS.
Пример — если вы вызываете Ext.getVersion (), он возвращает массив значений, таких как версия, короткая версия и т. Д.
Ext.getVersion (). Version возвращает текущую версию Ext JS, используемую в программе, например, «4.2.2».
Функции, связанные с браузером
Эти функции возвращают логические значения в зависимости от используемого браузера. Этими методами являются Ext.isIE, Ext.isIE6, Ext.isFF06 и Ext.isChrome.
Пример — если вы используете браузер Chrome, то функция Ext.isChrome вернет true все, иначе вернет false.
Эта функция возвращает тип данных переменной.
Методы, связанные с DataType — эти функции возвращают логическое значение на основе типа данных переменной