Рубрики
Без рубрики

Sencha Ext JS Учебник: Введение в EXT JS 5

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

Автор оригинала: Arthur Kay.

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

Этот блог пост основан на часах офиса кодамента с менеджером по связям с разработчиком Sencha Arthur Kay. Статья о том, что новое в Ext JS 5, и послужит простым прохождением того, как использовать рамки. В конце концов, Артур отвечает на некоторые вопросы аудитории, например, как Sencha Ext JS 3.x сравнивается с 5 и насколько совместима Sencha с мобильными телефонами.

Вступление

Sencha со скоростью 2007 года с 2 миллионами разработчиков всемирно использует его и более 10 тысяч коммерческих клиентов, в том числе 60% компаний Fortune 100, таких как Google, Adobe и Salesforce. Как выступил в 2006 году jQuery и другие библиотеки, Sencha была довольно революционером во время своего первого выпуска, но в настоящее время в 2014 году и флагман Sencha Ext JS теперь превратился в версию 5 (и недавно обновлялся до 5.1 по состоянию на декабрь).

Некоторые важные обновления EXT JS 5:

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

Увеличение производительности разработчика EXT JS 5 также поддерживает двустороннюю передачу данных для сохранения времени разработчиков, а привязка к данным не ограничивается шаблоном HTML, так как он может быть проведен по всей каркасе и всем виджетам. Кроме того, EXT JS 5 также поддержит маршрутизацию URL, поэтому можно делать глубоко связанные.

Sencha Ext JS против Angularjs

Если вам интересно, насколько EXT JS сравнивается с угловым js, вот быстрое обзор различий между двумя: как вы можете видеть, Ext JS принимает очень другой подход к каркасам. Многие виджеты выходят из коробки, и пользователи не должны полагаться на сторонние библиотеки.

Что еще более важно, Ext JS поддерживает множество устаревших браузеров, включая Internet Explorer 8 и 9. Многие крупные организации не могут ожидать, что их пользователи будут выполнять последние браузеры на своем устройстве, тем более что хорошая часть пользователей Интернета все еще использует Интернет Explorer 8.

С точки зрения стиля разработки Angularjs, кажется, является HTML-ориентированным и, следовательно, нуждается в большом количестве ручной работы HTML. Ext JS – это больше, управляемый JavaScript, и не требует большого HTML-кода.

Пример HTML шаблона углового приложения

Пример приложений

Привет Hello World

Давайте посмотрим, как выглядит приложение Ext JS Hello World. Страница HTML довольно проста, где она включает в себя Framework Ext JS вместе с темой. Вам даже не нужно ничего иметь в Тело тег. Самое главное в шаблоне HTML, естественно, app.js Похоже на то, что вы делаете в jQuery или других рамках, Ext.enready Блок будет работать после завершения загрузки HTML Web Page. Как только страница будет готова, Ext.Create () начнут создавать виджеты, а затем отображать их на экран.

В этом примере Helloworld мы создаем виджет Ext.Panel Это название класса, и визуализируйте его на тело веб-страницы. Он имеет высоту, ширину и название, а также немного RAW HTML, но часть HTML – это не то, что вы обычно делаете, это только для демонстрационных целей. Когда вы прыгаете в свой браузер, вы бы увидели это: Там, где у вас есть панель с синим фоном из темы, и RAW HTML попадает в остальную часть панели.

Вы можете следовать и сделать этот пример через EXT JS Hello World Documentation Отказ

Вы также можете сделать предварительный просмотр примера из API Документы Где вы можете увидеть параметры конфигурации, свойства, методы и т. Д.

Создание приложения через Sencha CMD

Sencha CMD – это набор инструментов командной строки, чтобы помочь пользователям оптимизировать приложение, которое они строят, в котором вам не нужно включать всю систему Sencha Framework, и весь пользовательский код, который вы написали, если не требует его приложения. Sencha CMD также интегрируется с Cordova и Phonegap, чтобы вы могли врознить пакет и развернуть ваше приложение к планшету iPad или Android.

Давайте откроем терминал, чтобы создать приложение через Sencha CMD. Мы будем запускать Sencha CMD здесь и генерировать приложение стартера под названием Кодаментар , который выводят на местоположение Кодомедемно Отказ Это будет автоматически генерировать приложение стартера с архитектурой MVVM вместе со всеми необходимыми привязками для процесса сборки.

После того, как Sencha CMD заканчивается, генерируя приложение, вы можете открыть свой IDE и найти все свой код и файлы в папке CodementODEMO.

Вы также можете запустить локальный веб-сервер через Sencha CMD

sencha web start

В котором ваша веб-страница будет выпущена на http://localhost: 1841

Sencha Grid

Sencha Grid – отличный способ отображать данные, и это одна из самых популярных функций EXT JS. Вы можете отсортировать сетку, повернуть столбцы включения и выключения и переставить столбцы на лету. Насколько EXT JS 5 теперь есть виджет сетки, который может быть непосредственно встроена в строку сетки, а данные обновляются в прямом эфире.

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

Ext JS может использовать множество различных типов других прокси, таких как локальные прокси хранения и прокси отдохнуть. Это примерное приложение использует прокси AJAX, который будет использоваться в Helloworld.store.Cars Класс, где он загрузит код из файла JSON.

Модель Car Cars будет расширять по умолчанию Ext Модель, поэтому она наследует многие вещи, такие как Getter и Getters. Здесь мы можем определить, какие поля ожидают. Мы можем быть ленивым и предоставлять массив строк для класса модель, чтобы выяснить, какие данные, которые есть, или более явнее о типе модели автомобиля, должны быть строкой. Эти имена важны, когда мы попадаем на главный вид.

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

Для получения дополнительной информации о Sencha Ext JS вы можете посетить следующие ссылки:

Q & A.

Каковы некоторые запускающие или популярные приложения, которые в настоящее время используют Ext JS в производстве?

Уильямс и pixx.io приходить в голову. Многие крупные компании используют Ext JS для проприетарного и внутреннего использования, поэтому вы не найдете много примеров в общественном расстоянии. Тем не менее, вы можете проверить Sencha Blog Для получения дополнительной информации, так как он имеет множество клиентов и подчеркивает компании, которые хотят рассказать об их опыте с использованием Sencha Frameworks.

Как бы вы сравнивали EXT JS 3.x VS EXT JS 5 с точки зрения производительности?

Несмотря на то, что в снижении производительности был компромисмент от перезаписи Ext JS 4 для поддержки MVC и MVVM, Ext JS 5 улучшился на его производительности. Однако на данный момент не было никакого явного сравнения между выполнением двух версий.

Насколько сложно обновить от Ext JS 3.x до 5?

Из-за больших архитектурных различий и 5-летние изменения API и исправлений ошибок, это, вероятно, было бы довольно сложно обновить с версии 3.x до 5. Однако один из основных целей EXT JS 5 должен был предотвратить эту сложность миграции от происходит снова.

Какой лучший способ использовать несколько тем для приложения?

Один из способов заключается в том, чтобы прикрепить новую тему всякий раз, когда вы генерируете новое приложение через процесс сборки Sencha CMD – многие клиенты повернули свои собственные приложения таким образом. Другой подход – настроить app.json Файл для указания того, какая платформа получит какую тему, а затем поменять их, когда приложение первые нагрузки. API Документы Есть гиды для обоих методов.

Насколько хорошо поддерживает мобильные телефоны EXT JS 5?

Виджеты Ext JS 5 явно поддерживают таблетки, но те на самом деле будут работать на телефоне, включая опорную поддержку. Тем не менее, поскольку телефоны, как правило, недостаточно недостойны и имеют гораздо меньшие снижения, чем таблетки или настольные компьютеры, клиенты не просили поддержку по телефону и, следовательно, не так много документации по разработке телефона для iPhone и Android.

Будет ли Sencha Ext JS хорошим выбором для начинающих, которые стремятся создавать свои первые приложения для iPhone или игры?

Если вы исключительно сосредоточены на разработке мобильных телефонов, Ext JS не может быть лучшим выбором, так как это всеобъемлющий виджет Framework. Вряд ли вы построете большое приложение, которое использует все доступные компоненты. Кроме того, Sencha не является компанией Game Development, что означает, что рамочная структура вокруг HTML5, и вы можете подумать, что это хорошо для создания игры HTML5, в конечном итоге не правильный инструмент для работы. Таким образом, вам было бы лучше проверить библиотеки интерфейсов игры, чтобы увидеть, что вы можете сделать с тем.

Несколько лет назад Facebook сильно вложил в HTML5, то по сути, по существу вытянул обратно, чтобы создать мобильные приложения. Что вы принимаете на это решение и как сейчас кроссплатформенная экосистема HTML5?

Когда Марк Цукерберг вышел и сказал, что HTML5 не был готов еще в 2012 году, Сенча категорически не согласился с ним и создал приложение под названием FastBook , что по существу переписать фактическое приложение Facebook с HTML5. С точки зрения производительности FastBook фактически побеждает веб-приложение Facebook на iPhone. Таким образом, Sencha всегда предприняла позицию, что HTML5 готов доставлять представления клиентов, и пользователи ожидают.

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

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

Наконец, если вы заинтересованы в том, чтобы увидеть, как Sencha Ext JS работает сами, вы можете Попробуйте бесплатно на 30 дней Отказ