ExtJS Простой просмотрщик файлов


Содержание

ExtJS 6 — Как загрузить файл без использования формы?

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

ps На самом деле, версия, которую я использую, — Ext JS 6, но я думаю, что решения, основанные на предыдущих версиях, также работают.

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

Форма не требуется. Вы можете использовать AJAX и FormData.

ExtJS. Первое приложение (Hello from ExtJS)

Что такое ExtJS?

Что такое ExtJS? Это довольно мощная библиотека компонентов под JavaScript, на момент написания статьи распространяется компанией Sencha! Последняя версия, опять же на момент написания статьи это 6 версия. Все дальнейшие эксперименты я буду проводить именно с 6 версией.

Где скачать ExtJS?

Официальная бесплатная GPL лицензия может быть скачана здесь. Более подробно о лицензиях есть информация на хабре. Конечно информация с хабра слегка устарела, но все же! Было бы полезно понимать какие лицензии вообще существуют. Ценник у ExtJS кусается, но для любителей свободного ПО есть вариант с GPL о котором я уже говорил.

Какие файлы подключать для начала работы и где их взять?

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

Общий взгляд на AJAX фреймворк ExtJS

Веб-приложения сегодня уже далеко не только и не столько мода и новаторство, сколько повседневная реальность для многих людей, как пользователей, так и разработчиков. Судя по последним выставкам и конференциям стартапов, веб-приложения, это основа бизнеса и надежд едва ли не каждого второго стартапа в веб-индустрии. Пользователи и рынок требует от такого приложения уже намного больше, чем даже год-полтора назад. И в первую очередь (ну или во вторую) все хотят иметь удобный, простой и привычный всем интерфейс. А под ним мы понимаем устоявшуюся модель интерфейса операционных систем Windows/Linux (KDE или Gnome) и приложений под них, например, MS Office 2003 и других. Воссоздать его для веб-приложения, сохранив максимум функциональности, и замыслили, видимо, разработчики библиотеки ExtJS.

ExtJS — фреймворк для построения веб-интерфейсов

Библиотека ExtJS написана на JavaScript и работает во всех популярных сейчас браузерах (хотя и с некоторыми различиями), предназначена для создания сложных и насыщенных интерфейсов, которые очень похожи на их аналоги из мира desktop-программ. Она предоставляет разработчику целый набор графических компонентов, от тривиальных кнопок и расширенных элементов обычных HTML-форм, до сложнейших компонентов вроде таблиц, лейаутов и деревьев. В библиотеке также есть достаточно много невидимых пользователю компонентов, которые и обеспечивают работу того, что мы видим на экране. Это и получение данных с сервера в фоновом режиме (в формате JSON или XML), обновление частей страницы, локальные хранилища данных, поддержка cookie и многое другое.

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

Каждый компонент в ExtJS позволяет себя конфигурировать путем настройки разнообразных опций, генерирует множество событий в ответ почти на любое изменение своего состояния, а также гибко настраивается через задание необходимых свойств оформления в CSS-стилях. Кстати о них. В архитектуре библиотеки есть и такое понятие как тема оформления — это обычный CSS-файл, изменяя который можно мгновенно изменить внешний вид всех элементов интерфейса. Уже создано множество различных пользовательских тем, в разной цветовой гамме и стиле, хотя, на мой взгляд, именно стандартная тема наиболее приятная и привычная для большинства пользователей.

Основные компоненты и возможности

Для рассмотрения библиотеки ExtJS мы разделим ее компоненты на несколько групп — так вы сразу увидите их масштабы и применимость, ну а конкретную техническую информацию всегда можно узнать из документации (она очень даже хорошая, оформлена в виде веб-приложения, что еще больше раскрывает ее потенциал).

Самый нижний слой — это низкоуровневые функции по работе с DOM-деревом, событиями, стилями и другие функции. Здесь предоставляется свободу выбора — вы можете использовать адаптеры для подключения своей любимой библиотеки. В особенности это нужно, когда вы желаете смешать в одном приложении функциональность, к примеру, jQuery и ExtJS. Сейчас, во второй версии, можно как использовать родные функции, так и другие библиотеки: jQuery, Yahoo UI!, Prototype. Правда, для построения быстрых приложений я думаю, лучше взять встроенный адаптер, как минимум, это сэкономит несколько десятков килобайт на начальной загрузке.


Core — это основные базовые модули и функционал, который необходим для работы всех остальных компонентов библиотеки и приложения. Но реально ведь часто вы не используете абсолютно все компоненты, поэтому и он разбит на несколько модулей:

  • Самое-самое ядро, это обязательный компонент, обеспечивает общий менеджер событий, работу с адаптерами и основные операции с DOM-моделью. Для построения самых простых приложений можно использовать только этот компонент, так как в него включены все необходимые функции, в том числе и UpdateManager для обновления любой части страницы по расписанию или событию от пользователя (именно это часто и понимают под термином AJAX).
  • Для использования визуальных компонентов (виджетов) уже нужен модуль, который обеспечивает их работу, рендеринг и управление наборами виджетов. Кстати, в отличие от предыдущих версий, в 2.0 значительно усовершенствовали процесс работы с виджетами, например, есть функция отложенного рендеринга (lazy render) когда все операции по отрисовке или обновлению элементов координируются самой библиотекой, а это экономит время и делает приложение быстрее.
  • Утилиты — добавляют функции работы с JSON, обработку CSS, работу с событиями клавиатуры и базовую поддержку шаблонов. Да, в этой библиотеке реализована своя система шаблонов. Теперь конструировать сложные приложения, работающие с большими объемами выводимых пользователю данных, стало проще — вместо генерации на сервере готовой страницы можно однажды загрузить нужные шаблоны и далее оперировать с ними. Для полноценного использования этой возможности нужен отдельный компонент ядра — Xtemplate (не путать с аналогичным по названию шаблонизатором для РНР).
  • Поддержка кросс-браузерного Drag&Drop также вынесена в отдельный модуль — ведь, по сути, она нужна только если вы используете виджеты, да и то часто можно, путем ограничения части функционала, увеличить производительность, отказавшись от DnD.
  • Хорошим дополнением к приложению станет возможность хранить состояние интерфейса в независимом хранилище, например cookie (компонент State Manager ) — при повторном входе все ваши открытые окна или вкладки будут восстановлены, что делает приложение гораздо «умнее» и привлекательнее для пользователя, особенно если используется сложный интерфейс.

Работа с данными. Так как любое веб-приложение основано на каких-то данных, то этот слой в библиотеке не менее насыщенный различным функционалом, чем визуальные компоненты. Обмен данными с сервером может вестись в двух форматах — JSON, как самый простой и родной для JavaScript, и XML, что позволяет реализовать более широкий функционал, но ценой ресурсоемкости всего приложения. Вся работа с данными построена на следующей компонентной схеме. Основной компонент Store — с ним и работают другие объекты, желающие получить или отправить данные. Reader отвечает за структуру данных и их верную интерпретацию, вне зависимости от формата. Proxy обеспечивает прозрачный доступ к серверу через промежуточную абстракцию Connection так, что приложению не важно, да и не надо даже знать, как в реальности данные пришли от сервера. Объект (или набор объектов) Record хранит коллекцию записей из данных (согласно заданной структуре). Исходя из нужного вам функционала, вы можете использовать компоненты, которые работают с JSON-данными или XML, или даже и те и другие вместе.

Визуальные компоненты

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

Управление общей компоновкой обеспечивают компоненты группы Layout , которые позволяют разметить блоками всю область окна приложения и в дальнейшем работать с ними по отдельности, обеспечивая в то же время общую целостность интерфейса и его структуры. Отдельные части страницы можно сворачивать, скрывая полностью или менять их размер, передвигать границы областей — все, что угодно, все, что привыкли делать пользователи в обычных приложениях (например, IDE, да, кстати, есть и проекты онлайновых IDE для разных языков, и, поверьте, они не так уж сильно уступают монстрам вроде Eclipse/VisualStudio).

Динамическая подсказка или Tooltip — очень мощный и хороший компонент, и хотя он на фоне других кажется небольшим, но честно заслуживает отдельного упоминания. Он позволяет для любого элемента на странице (как визуального, виджета например, так и к любому DOM-объекту, видимому, конечно) прицепить подсказку, которая будет показана при наведении мыши. Сама подсказка может содержать в себе произвольный HTML-код, изображения и даже быть контекстно-зависимой — подгружаться через AJAX. И пусть компонент тривиальный, но почему-то разработчики часто забывают, что это очень и очень помогает пользователям, особенно если вы делаете большое и сложное приложение — потратьте немного времени на добавление подсказок и это повысит и ваш рейтинг в глазах пользователей, и юзабилити всего приложения.

Вы можете подключать и использовать множество виджетов — и кнопки (разного вида, с изображениями и текстом, кнопки-переключатели, кнопки с выпадающим меню и т.п.), меню (как контекстные, так и тулбары с меню, совсем как в обычных приложениях), индикаторы загрузки и прогресс-бары. Есть и такое, свойственную только веб-приложениям решение, как Loading Mask, которое позволяет «заморозить» для пользователя все приложение на то время, пока вы получаете и обновляете данные с сервера. Есть и функциональные контролы для выбора даты и цвета, есть отличные компоненты для вывода сообщений, как модальные типа MessageBox, так и полноценные окна, в которые, в свою очередь, можно вставлять любые элементы управления или разделять их закладки, сворачивать и развертывать, перетаскивать по экрану и т.п.

Таб-панель — еще один мощный компонент для построения тех приложений, которые, с одной стороны, требуют, чтобы пользователю показывалось сразу много разной информации, формы, таблицы и другие объекты, в то же время нужны ограничения и в каждый момент времени показывать только самое необходимое. Для такого структурирования широко применяют вкладочный интерфейс (посмотрите на окна с настройками в вашей ОС), и в ExtJS пошли тем же путем. Даже диалоговые окна имеют свойства для автоматического преобразования набора правильно оформленных DIV-слоев сразу в набор панелей.

Tree — часто используемый компонент, позволяющий группировать иерархические структуры и отображать их с любой глубиной вложенности, автоматически подгружая новые элементы, менять местами, перетаскивая мышью отдельные элементы и другие стандартные операции. В последних версиях деревья были расширенны путем добавления функций редактирования элементов прямо на месте отрисовки (Inline item editing).

Форма является одной из основных высокоуровневых абстракций библиотеки, и использует почти все из описанных компонентов, в частности большинство визуальных виджетов, которые расширяют стандартные элементы форм. Она также использует слой доступа к данным для заполнения некоторых компонентов (например, ComboBox может получать данные от сервера). В функциональность форм входит и предварительная проверка вводимых пользователем значений, что уже стало классической функциональностью для веба. Используя встроенные обработчики, можно проверять вводимые e-mail адреса, URL, и просто строки символов, однако никто не мешает расширять встроенные наборы, создавая свои валидаторы (любой виджет для ввода данных позволяет определить произвольную функцию для проверки ввода). Есть и встроенный простейший HTML-редактор, хотя его функциональность очень уж ограничена. Впрочем, для 95% случаев, когда его необходимо использовать, этих возможностей хватит с головой, а для построения аналога MS Word/OpenOffice Write необходимо все же задействовать специализированные библиотеки вроде FCKEditor или TinyMCE. Кстати, форма в ExtJS сама умеет передавать себя на сервер в виде XML-документа и обрабатывать ответ, в том числе и валидацию полей на сервере — для этого есть отдельный компонент, стандартно же используется JSON и обычная передача через GET/POST параметры.

Таблица или Grid — самый востребованный и самый мощный из компонентов, которым располагает разработчик на ExtJS. Впрочем, он одновременно является и самым сложным. В общих чертах, он также построен на модели абстракции каждого уровня: данные могут получаться из DataStore , внешнее отображение задается как специальными функциями-рендерами для каждого столбца отдельно, так и компонентом GridView, который отвечает, например, за заголовок таблицы и создание тулбара с элементами постраничного управления выводом данных. Для выделения строк и ячеек есть, соответственно, RowSelectinsModel и CellSelectionModel . Также поддерживается особый тип таблиц со встроенной функцией редактирования данные напрямую в ячейке (это позволяет расширить функционал такой таблицы почти что до уровня Excel/Calc). В ветке 2.0 появилась и возможность избирательно группировать строки, совмещая, таким образом, функциональность таблицы и дерева (Grid и Tree). Конечно, в таблице полностью поддерживается и DnD — можно визуально менять расположение столбцов, перетаскивать отдельные строки, менять их ширину, сортировать данные в колонках и другие операции.

А что дальше?

Развитие библиотеки не стоит на месте. Например, вместе с выходом среды Adobe AIR библиотека пополнилась отдельным интерфейсом, позволяющим легко взаимодействовать с этой средой и встраивать ее возможности в приложение. Таким образом, совместно с AIR и ExtJS уже реально создавать приложения, которые, оставаясь веб-ориентированными, вместе с этим просто идентичны традиционным десктопным, совмещая все преимущества и сильные стороны обоих типов программ. Кстати говоря, вся эта мощь совершенно бесплатно, библиотека распространяется под двумя лицензиями: OpenSource LGPL 3.0 и коммерческой. В большинстве же случаев вам вполне достаточно соблюдать ограничения открытой лицензии, но и заплатить за такой отличный инструмент около трехсот долларов (столько стоит лицензия для одного разработчика) совершенно не жалко.

Выводы

Библиотека ExtJS является стабильным и качественным продуктом, можно сказать, enterprise-уровня, развивается специально созданной компанией. Конечно, ее применимость для многих проектов под вопросом — хоть бы потому, что она достаточно требовательная к браузеру и скорости подключения. Объем основного файла (в полной версии) приближается к 1 Мб кода, а это, согласитесь, достаточно много. И это как раз расплата за гибкость и широту возможностей.

Как область применения, в основном, видится создание либо административных панелей и приложений для управления, например, сайтом, порталом или другим веб-сервисом. Самостоятельные веб-приложения, особенно те, которые будут использоваться профессионалами — для них скорость первичной загрузки и инициализации не так важна, как гибкость и простота интерфейса. Наличие мощных компонентов для работы с данными позволяет строить разные аналитические и CRM-системы (к сожалению, не хватает компонента для рисования графиков и диаграмм) и сервисы для управления проектами (кстати, в одном таком достаточно известном приложении используется ExtJS, хотя без анализа исходного кода визуально это незаметно).

А вот обычные веб-страницы и простые web 2.0 сайты, направленные на большую посещаемость и массовую аудиторию — не самый лучший вариант применения Ext-a. Даже в минимальном комплекте размер библиотеки будет около 140 Кб, что часто намного больше, чем у конкурентов, при этом вы потеряете все визуальные «вкусности», а низкоуровневую работу с удовольствием выполнит тот же jQuery, при пятикратной разнице в размере файла. Так что нужно говорить не столько о просто «AJAX-библиотеке» , сколько именно «библиотеке для веб-приложений» , что подразумевает намного большее (как в плане возможностей, так и сложности или ресурсоемкости).

Честно говоря, я намеренно не использовал в статье конкретные примеры кода, даже не всегда указывал на точные названия классов и методов — все это совершенно вторично, по крайней мере для хорошего веб-разработчика. Попытайтесь понять, где и как вы можете использовать эти возможности, где вам и вашим пользователям нужен красивый и многофункциональный веб-интерфейс. А дальше уже встроенная в дистрибутив справка по API, обширная библиотека примеров, наглядно демонстрирующая всю красоту, мощь и гибкость создаваемых интерфейсов, официальный форум, русскоязычный сайт и Google-группа помогут вам в реальности воплотить свои замыслы в код.


Создание первого приложения

В этой статье мы поговорим о том, как начать работу с ExtReact. Решив выйти из экосистемы Sencha, вы все ещё можете использовать SenchaCmd для создания папки проекта, файлов конфигурации. В остальном нам поможет штатная утила для создания стартового React приложения: create-react-app . Данная утила работает под всеми распространенными операционными системами (Windows, Linux, MacOS) , она создает: папку проекта с дефолтной структурой файлов и папок, экземпляр веб-сервера, unit тесты.

Проект, созданный с помощью create-react-app скрывает файлы конфигурации сборки, в данном примере они нам не понадобятся. Следующие шаги создадут стартовое приложение, затем мы постепенно будем добавлять небольшие файлы React.

Создание стартового приложения

Приложение create-react-app имеет отличное README, которое описывает установку и использование утилы. Для получения полного руководства рекомендую обратиться к официальной документации. Установите приложение create-react-app используя npm .

Note: Если у вас нет окружения Node + NPM, обратитесь к этой документации.

Вы можете использовать следующие команды терминала в выбранной вами папке для установки приложения create-react-app и запуска веб сервера:

Официальная документация Sencha говорит нам об использовании Yeoman , установим его и generator-ext-react (аналог create-react-app ) , далее создадим тестовое приложение и запустим веб сервер. При генерации шаблона укажем, что нам необходимы примеры — опция Include some example code , а так же отдельная директория для проекта, все остальные параметры пропускаем. Из остальных параметров я выбрал лишь material тему приложения.

Если данная команда вызывает ошибку Cannot resolve package requirements , вам необходимо аутенфицироваться в официальном npm репозитории Sencha, но до этого необходимо оформить trial , если у вас нет лицензии на данный продукт.

Старт приложения начинается с /src/index.js , именно там хранится основной RenderDOM, с указанием куда именно рендерить приложение, по умолчанию рендер осуществиться в body, с созданием обычного viewport’a.

Учим приложение загружать стили

На небольших приложениях порой нет смысла писать собственную тему, можно обойтись стилизацией на уровне приложения. По умолчанию стартовое приложение не умеет подключать стили, для этого нам необходимо добавить в /package.json :

Устанавливаем devDependencies командой npm install —only=dev , далее идем в /webpack.config.js (это по сути аналог app.json) и добавляем правила

Теперь мы можем импортировать стили командой import ‘./path/to/file.css’; К слову, использование npm start аналогично использованию sencha app watch —fashion , все изменения в стилях и коде на лету подхватываются браузером с помощью Hot Module Replacement.

Ошибки сборки и сборка проекта

Когда у вас запущен npm start , вы всегда увидите критическую ошибку, например, забыли правильно закрыть тег

. Не критические ошибки будут показаны в консоли браузера.

Сборка проекта осуществляется с помощью npm run build , так же можно указывать профили сборки.

Написание больших приложений на ExtJS (Часть1)

Предисловие


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

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

Я только хочу сказать, что мой подход, позволяет легко структурировать и писать красивый код. Он «реально работает»!

Что можно назвать большим приложением ?

Если у вас есть Viewport с BorderLayout, grid и формы — все в одном файле, это конечно, небольшое приложение. А вот если у вас десятки окон с формами, гридами и все это в 10 файлах, это уже не маленькое приложение, правда ?

(У немцев есть забавное выражение Jein, которое является производным от Ja = Да и Nein = Нет )

Ответ на вопрос поставленный выше это Jein (Прим. переводчика: Русское Да-нет наверное тоже является эквивалентом этого немецкого слова). Нет однозначного ответа, когда приложение становится большим, оно становится большим, когда вы считаете, что оно стало большим. Этот момент обычно наступает, когда вы уже не можете ориентироваться в ваших файлах, когда вы перестаете понимать как ваши компоненты в приложении соотносятся друг с другом. Нужно также представлять что будет, если с вашим кодом начнет работать программист в 2 -3 раза менее опытный чем вы.

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

Самое лучше — начинать писать приложение со словами: «Я начинаю писать большое приложение!».

Файлы и папки.

Это необходимо организовать в первую очередь. Нужно всегда начинать с ServerRoot директории настроенной в Apache или каком-нибудь другом HTTP сервере, все описанные далее папки идут относительно нее.

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

* css будет содержать все ваши таблицы стилей. Если у вас есть глобальные таблицы стилей с фирменными цветами и шрифтами можно создать в CSS каталоге ссылку.

* ext ссылки на дерево ExtJS библиотек разных версий.

* img ссылки на изображения. Он может содержать также подкаталоги.

* js будет содержать все скрипты вашего приложения.

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

* По желанию, вы можете создать директорию или ссылку на ваши серверные скрипты (у меня есть. / classes).

(Прим.Переводчика: ссылки для Linux).

index.html


Примерное минимальное содержимое файла index.html выглядит следующим образом:

application.js

Нам нужен файл в котором будет размещена функция onReady, давайте назовем его application.js. Минимальное содержание выглядит так:

Ваш header и footer может быть различным, но уверен, вы должны установить параметр Ext.BLANK_IMAGE_URL, чтобы он указывал на картинку на локальном сервере. Это путь к 1 × 1px прозрачной картинке, которая используется Ext для пустых областей, если параметр указывает на неправильное место, у вас могут возникнуть различные проблемы — такие, как отсутствие изображения-переключателя у Combobox, либо отсутствие иконок.

Вам также может понадобиться создать новую глобальную переменную-объект для приложения (в данном случае это Application).

Вы должны быть уверены, что Ext.onReady, это начало вашего приложения — место, где вы пишете его инициализацию.

css/application.css

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

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

Как делать Неправильно!

Что мы обычно делаем когда узнали основы, правильно, начинаем писать код:

Подождите минутку. Так мы очень скоро получим более 10000 строк в нашем файле application.js, а это то, что мы хотим в самую последнюю очередь. Очевидно мы что-то пропустили, если мы создаем такой большой файл, почему бы нам вообще не написать все в index.html.

Правильное решение — разделить все!

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

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

Предварительно настроенные классы.

Итак, сейчас, когда вы определились со структурой вашего приложения, вы начнете писать первый из компонентов. Но каким образом ? Лучше решение — это расширить классы компонентов ExtJS, добавить в них конфигурационные параметры. Я называю такие объекты пред настроенными компонентами, они редко добавляют какой-то функционал в стандартный класс ExtJS, но главная цель этого — пред настройка. Например чтобы иметь преднастроенный grid, с собственномы ColumnModel, store, sorting option, editor и т.д. делаем следующее:

После создания преднастроенного класса мы можем его использовать следующим образом:

Что мы сделали ? Мы расширили класс Ext.grid.GridPanel создав новый класс Application.PersonnelGrid и мы зарегистрировали его как xtype с именем personnelgrid.

Мы настраиваем класс GridPanel всеми необходимыми функциями, которые нужны, чтобы этот класс стал объектом PersonnelGrid. С этого момента у нас появился новый компонент, строительный блок нашего приложения, который мы можем использовать в любом месте ( в окне, в таблице, самостоятельно — отдельно от всего остального). Мы можем создать его двумя способами:


ExtJS: Простой просмотрщик файлов

Приветствуем на новом сайте по программированию

Если у Вас возникли какие то идеи по поводу сайта — пишите

Ведется бета-тестирование про все найденные ошибки сообщайте на code at dobs.in.ua

Поиск

ExtJS — Javascript фреймворк для разработки веб-приложений и пользовательских интерфейсов, изначально задуманный как расширенная версия Yahoo! UI Library, вылившийся затем в отдельную библиотеку. Использует адаптеры для доступа к библиотекам YUI, jQuery или Prototype. Поддерживает технологию AJAX, анимацию, работу с DOM, реализацию таблиц, вкладок, обработку событий и все остальные новшества «Web 2.0».

Очень кратко список нововведений

Поддержка нативных функций по работе с JSON, которые уже появляются в последних версиях браузеров;
Множество новых функций в базовом ядре, в частности, некоторые математически функции, работа с объектами и классами, операции над массивами.
Появление компонента Chart — рисование различных типов диаграмм и графиков (по сути — наш ответ для компонента из конкурирующего Dojo, имеется ввиду DojoX.Chart). Пока поддерживается четыре различных видов графиков и множество возможностей по их настройке. Хотя в сложных случаях все равно надо применять специализированные библиотеки, но если вы не супер-ERP систему делаете, то этих возможностей вполне достаточно.
В пакете для работы с данными появились компоненты для записи структур данных в формат Ext.data.Record.
Появились классы, упрощающие создание и управление источниками данных (которые в ExtJS состоят из достаточно большого количества компонент)
Пакет Direct для прямого обмена данными с сервером через периодический опрос или RPC (вообще, эта тема стала ключевой в 3-й версии), включая компоненты JsonProvider, PollingProvider и другие.
Для компонента таблиц появились новые типы колонок (BooleanColumn, TemplateColumn) и другие, расширена и система работы с выделениями (SelectionModel).
Появилась возможность редактировать в таблице не только отдельные ячейки но и объединенный редактор для всей строки.
Новые типы лайаутов: VBoxLayout и HBoxLayout для вертикального и горизонтального расположения элементов.
Для отладки и просмотра специфических для ExtJS моментов теперь есть Ext Debug Console, что реально упрощает работу и макетирование интерфейсов.
Новые компоненты:
Ext.ButtonGroup для групп из кнопок, теперь это очень схоже с интерфейсом Ribbon от MS, используемый в Office 2007 и других современных продуктах.
Ext.Direct для упрощенного интерфейса общения между клиентом и сервером (например, для периодического запроса данных или обновления статуса)
Ext.FlashComponent — для прозрачной инкапсуляции флешевых компонент. В частности, графики используют как раз флеш для отрисовки. Также присутствует класс Ext.FlashProxy для объединения событийных моделей JS и флеша.
Ext.ListView для создания красивых и функциональных списков.
В табах появилась возможность не только скролинга сокрытых панелей, но и отображение их в контекстном меню, что отлично подходит для приложений, где одновременно может быть открыто множество вкладок (лучший пример — официальная документация к ExtJS).
Группирование табов (как это сделано в документации на Ext Core)

Категория: JavaScript -> AJAX -> Библиотеки | Дата: 2009-01-06 | Просмотров: 9952 | Загрузок: 2962 | Размер файла: 6.6 МБ | Добавил: dobs

Создание первого приложения

В этой статье мы поговорим о том, как начать работу с ExtReact. Решив выйти из экосистемы Sencha, вы все ещё можете использовать SenchaCmd для создания папки проекта, файлов конфигурации. В остальном нам поможет штатная утила для создания стартового React приложения: create-react-app . Данная утила работает под всеми распространенными операционными системами (Windows, Linux, MacOS) , она создает: папку проекта с дефолтной структурой файлов и папок, экземпляр веб-сервера, unit тесты.

Проект, созданный с помощью create-react-app скрывает файлы конфигурации сборки, в данном примере они нам не понадобятся. Следующие шаги создадут стартовое приложение, затем мы постепенно будем добавлять небольшие файлы React.

Создание стартового приложения

Приложение create-react-app имеет отличное README, которое описывает установку и использование утилы. Для получения полного руководства рекомендую обратиться к официальной документации. Установите приложение create-react-app используя npm .

Note: Если у вас нет окружения Node + NPM, обратитесь к этой документации.

Вы можете использовать следующие команды терминала в выбранной вами папке для установки приложения create-react-app и запуска веб сервера:

Официальная документация Sencha говорит нам об использовании Yeoman , установим его и generator-ext-react (аналог create-react-app ) , далее создадим тестовое приложение и запустим веб сервер. При генерации шаблона укажем, что нам необходимы примеры — опция Include some example code , а так же отдельная директория для проекта, все остальные параметры пропускаем. Из остальных параметров я выбрал лишь material тему приложения.

Если данная команда вызывает ошибку Cannot resolve package requirements , вам необходимо аутенфицироваться в официальном npm репозитории Sencha, но до этого необходимо оформить trial , если у вас нет лицензии на данный продукт.

Старт приложения начинается с /src/index.js , именно там хранится основной RenderDOM, с указанием куда именно рендерить приложение, по умолчанию рендер осуществиться в body, с созданием обычного viewport’a.

Учим приложение загружать стили


На небольших приложениях порой нет смысла писать собственную тему, можно обойтись стилизацией на уровне приложения. По умолчанию стартовое приложение не умеет подключать стили, для этого нам необходимо добавить в /package.json :

Устанавливаем devDependencies командой npm install —only=dev , далее идем в /webpack.config.js (это по сути аналог app.json) и добавляем правила

Теперь мы можем импортировать стили командой import ‘./path/to/file.css’; К слову, использование npm start аналогично использованию sencha app watch —fashion , все изменения в стилях и коде на лету подхватываются браузером с помощью Hot Module Replacement.

Ошибки сборки и сборка проекта

Когда у вас запущен npm start , вы всегда увидите критическую ошибку, например, забыли правильно закрыть тег

. Не критические ошибки будут показаны в консоли браузера.

Сборка проекта осуществляется с помощью npm run build , так же можно указывать профили сборки.

Вопрос по extjs, web, javascript, extjs4 &#8211 Установить место загрузки файла с помощью ExtJs

Я использую ExtJ для разработки внешнего интерфейса и ищу способ указать место для файла, который нужно загрузить. Я знаю, что могу использовать xtype:filefield для просмотра файлов, но для этого требуется, чтобы я выбрал фактический файл, мне просто нужно выбрать папку для назначения файла и затем отправить этот путь в другое место. Как я могу это сделать?

Если ваше приложение предназначено только для интрасети, существуют различные способы, которыми вы можете перенести конфигурацию на пользователя.s браузеры (в зависимости от того, какой веб-браузер они используют во внутренней сети). Но это сделало быВСЕ Загрузки идут в это место.

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

Если это приложение для интрасети, и если ваша интрасеть работает под управлением Firefox, есть такжеэто дополнение, Вы должны были бы распространить это на всех ваших пользователей.Компьютеры (или вручную установить их на всех). У меня нетЯ еще не пробовал, но я планировал использовать его в случае возникновения ситуации, подобной вашей (вся моя работа с ExtJS связана с внутренней сетью, на которой запущен Firefox — я выдвигаю подобные вещи, используя скрипт входа в систему, когда пользователь входит в сеть, чтобы автоматически установить их ).

ExtJS 6 — Как загрузить файл без использования формы?

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

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

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

Хотя я согласен с ответом scebotari в том , что в вашем случае вложения формы в панели инструментов, вероятно , является самым простым решением, для ответа на исходный вопрос:

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

Идея заключается в том, чтобы прочитать содержимое файла на стороне клиента (JavaScript), а затем отправить данные с помощью регулярного запроса AJAX.

Usefull 4 web developers


Все что может пригодиться web разработчикам

Краткое руководство по Ext JS 4

Управление данными

Ext JS включает 41 класс для загрузки и сохранния данных. Наиболе часто используются 3 из них:Model (Модель), Store (Хранилище) и Ext.data.proxy.Proxy (Прокси). Они поддерживают большое количество классов-сателлитов и используются практически в каждом проложении Ext JS 4.

Модели и Хранилища

Особое место при работе с данными занимает Модель (Ext.data.Model). Модель представляет собой некий тип данных в приложении — например веб-магазин может содержать модели для Пользователей, Продуктов и Заказов. Простейшая модель есть ни что иное, как несколько полей (fields) и данные для этих полей.

Архитектура модели

Создадим модель данных:

Как правило модели используются совместно с Хранилищем (Store), которое представляет собой множество экземпляров Модели. Создадим Хранилище, позволяющее просто подгружать данные:

В этом примере мы сконфигурировали Хранилище, использующее Ajax Proxy с адресом ‘users.json’ и Reader Json, который позволяет читать данные в формате «json». Хранилище автоматически загружает множество экземпляров модели с сервера по адресу users.json, которые выглядят примерно так:

Примериспользования простейшего хранилища

Встроенные данные

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

Сортировка и группировка

Хранилища поддерживают сортировку и фильтрацию и группировку локально, а также удаленно:

В описанном хранилище данные сначала сортируются по id, затем фильтруются по имени ‘Ed’, после чего группируются по возрасту по убыванию. Такой подход позволяет легко изменить параметры сортировки, группировки и фильтрации.

Прокси

Прокси используются Хранилищами для обработки загрузки и сохранения данных модели. Существует два типа прокси: на стороне клиента и на стороне сервера.

  1. Клиентский прокси использует память для хранения данных в браузере и локальное хранилище использующее HTML 5.
  2. Серверный прокси обрабатывает данные, передаваемые сервером используя Ajax, JsonP или Rest.


Прокси могут определяться и в модели:

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

  1. Для отказа от дублирования определения прокси в Хранилище
  2. Для загрузки данных без использования хранилища

Существуют также прокси, использующие возможности HTML5 — LocalStorage и SessionStorage. Хотя старые браузеры и не поддерживают возможности HTML5, они могут быть очень полезными для некоторых приложений.

Ассоциации

Модели могут быть связаны друг с другом с помощью API ассоциаций. Большинство приложений используют множество различных моделей, связанных между собой. Например приложение-блог может использовать модели Пользователь, Пост и Комментарий. Каждая модель Пользователя использует модель Пост, которая в свою очередь использует модель Комментария. Мы можем связать эти зависимости вот так:

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

Каждая из этих ассоциаций добавляет соответствующую функцию в модель. То есть объявив, что Пользователь использует несколько Постов, неявно создается функция user.posts (). Вызов user.posts () возвращает множество экземпляров моделей Постов. В свою очередь модель Пост получает связанные комментарии.

Ассоциации помогают не толко загружать данные, но и создавать новые:

Мы создали новый Пост, который автоматически присваивает себе новый идентификатор пользователя в поле user_id. Вызов sync() сохраняет новые Посты с помощью прокси — это, асинхронная операция, к которой можно использовать функции обратного вызова, если необходимо получить статус завершения операции.

Ассоциации belongsTo также генерируют новые методы модели:

Асинхронная функция (GetUser) снова использует callback чтобы получить экземпляр пользователя. Метод SETUSER просто обновляет foreign_key (user_id в данном случае) до 100 и сохраняет посты. Как говорилось ранее, обычно обратные вызовы используются после завершинея сохранения — для получения информации о результате выполнения операции.

Загрузка вложенных данных

Мы поместили функцию success в вызов User.load т.к. предполагается, что когда мы делаем запрос на получение данных Пользователя, сервер возвращает данные пользователя в дополнение ко всем вложенным Постам и Комментариям. С помощью установки ассоциации, проделанной выше, Ext JS 4 автоматически парсит вложенные данные в одном запросе. Вместо того, чтобы запрашивать данные Пользователя, Поста и Комментариев по отдельности, мы можем вернуть все данные в одном ответе:

Фреймворк автоматически парсит все данные. Очень просто сконфигурировать прокси модели для загрузки данных отовсюду и Reader обработает ответ в любом формате. Как и в Ext JS 3, модели и Хранилища используются в фреймворке многими встроенными компонентами: таблицами (Grids), Деревьями (Trees) и Формами (Forms).

Здесь можно просмотреть пример использования Ассоциаций и Валидации моделей в различных связках

В Ext JS 4 можно загружать и невложенные сущности. Это полезно когда необходимо просто загрузить данные. Загрузим данные Пользователя, как это проделано ранее, без связанных с ним Постов. Затем добавим вызов user.posts().load() в наш callback для получения связанных Постов.

Валидаторы

Ext JS 4 gпредоставляет богатую поддержку валидации данных. Для ее демонстрации добавим валидацию в модель Пользователя


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

Ниже перечислены некоторые валидаторы Ext JS 4 и их значения:

  1. «presence» нужно для того, чтобы убедиться, что поле имеет непустое значение. (0 допускается)
  2. «length» нужно для того, чтобы убедиться, что значение поле имеет длину, заданную рамками min и max. Оба свойства опциональны.
  3. «format» нужно для того, чтобы убедиться, что значение поля удовлетворяет регулярному выражению (в примере выше значение должно быть числом)
  4. «inclusion» нужно для того, чтобы убедиться, что значение поля принадлежим к одному из перечисленных
  5. «exclusion» нужно для того, чтобы убедиться, что значение поля не принадлежим к одному из перечисленных

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

Ключевая функция здесь — validate(), которая выполняет валидацию и возвращает объект Errors. Объект Errors — коллекция всех найденных ошибок и методов, таких как isValid() — которые true, если для поля не проинициализировано ни одной ошибки и getByField(), возвращающая все ошибки поля.

Слои и контейнеры

Система слоев.- одна из наиболее мощных составных частей Ext JS 4, управляющая размерами и позиционированием каждого компонента в вашем приложении. Лажжное руководство покпывает базовые основы работы со слоями.

Контейнеры

Пользовательский интерфейс приложения Ext JS 4 состоит из компонентов и контейнеров. Контейнером называется специальный тип компонента. который включаест в себя другие компоненты. Типичное приложение Ext JS 4 состоит из нескольних слоев вложенных компонентов.

Структура компонента.

Наиболее часто используемый контейннер — панель (Panel). Рассмотрим, как понестить в панель другие компоненты.

Мы создали панель, которая рендерит себя в html-элемент body, использовав свойство config для добавления друх дочерних панелей.

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

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

В примере выше мы не указали явно тип слоя для контейнера panel. Заметьте как дочерние панели лежат друг за другом, подобно блочным DOM элементам, причиной тому то, что по-умолчанию все контейнеры имеют тип слоя Auto Layout, который не устанавливает никаких правил позиционирования и масштабирования для дочерних элементов. Предположим, нам необходимы две дочерние панели, расположенный край к краю друг с другом, каждый из которых имеет ширину, равную 50% ширины родительского элемента. Для этого используем тип слоя Column:

Система слоев Ext JS 4 содержит множество готовых типов и может реализовать практически все, что вы можете себе представить. В качестве примера можно просмотреть тип слоя Browser.

Как работает система слоев

Слой контейнера отвечает за инициализацию позиционирования и масштабирования всех дочерних контейнеров. Это работает так: Ext JS 4 вызывает метод doLayout, который обрабатывает слой, вычисляя размеры и позиционирование дочерних контейнеров и обновляет DOM. Методы doLayout дочерних контейнеров тоже будут вызываться рекурсивно, пока не будет достигнут самый последний контейнер иерархической структуры. Все вызовы doLayout инициализируются автоматически, так что у вас нет неободимости вызывать их вручную.

При каждом изменении размеров контейнера, а также при добавлении/удалении компонентов просходит переинициализация слоев. Обычно мы полагаемся на фреймворм, который делает эту работу за нас, однако мы можем это предотвратить. Для этого используем флаг suspendLayout со значением true, который при необходимости легко устанавливается обратно в false.

Цукерберг рекомендует:  Вакансии King Bird
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих