.. / Большое приложение на Ext JS. Прелюдия

  1. ExtJS-large-application

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

Самый простой пример такого мегаприложения - справочная система самой ExtJS, в которой слева размещено дерево справки, справа - детали во вкладках. Фактически справочная система задает стандарт интерфейса большого приложения. Но в справочной системе нет необходимости внесения каких-то правок и детализаций. Такая необходимость возникает в CMS. Для большинства задач схема приложения будет примерно такая:

В левой части - дерево разделов. Здесь лежат сгруппированные по назначению компоенты CMS - все что может быть отредактировано, исправлено, удалено и создано, например статьи, новости, реклама, пользователи сайта, болталки и т.п. При нажатии на узел дерева в новом табе открывается перечень данных, соответствующий узлу дерева. Например - перечень статей принадлежащий той или иной рубрике. В строку таблицы все данные вбить невозможно, иногда нужно детализировать информацию. Для этого правая половина окна разделена пополам. В нижней части можно вывести дополнительную информацию по объекту, соответствующему строке таблицы. При необходимости каждый объект нужно отредактировать. Это можно сделать во всплывающем модальном окне. Иногда бывает полезно открыть сразу десяток окон редактирования и тогда окна должны быть немодальными. Ну и до кучи должна быть возможность фильтрации и поиска по списку, удаления, создания объектов и групповые операции. Такой структурой можно перекрыть значительную часть потребностей практически любой СMS. И вот такую фигню я хочу создать и описать по шагам.

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

Соглашение по архивам

  1. Все архивы будут лежать в одном и том же месте my_big_application_ExtJS4.zip сгруппированные по шагам - step1,step2,step3
  2. Внутри каждого шага для файлов есть промежуточные версии приложения типа grid1,grid2, grid3…

Соглашение по клиентской части

  1. Большое приложение - набор связанных между собой компонент. Основной компонент - сетка (Grid) со списком неких объектов (применительно к CMS статей, новостей, авторов, пользователей и т.д.). Класс основного компонента отражает сущность того объекта с которым он работает - Article, News, Author и т.д.
  2. Все остальные компоненты необходимые для работы с конкретной записью из списка в (просмотрщики, редакторы и т.п.) , появляются в отдельных окнах, вкладках когда в сетке нажата соответствующая ссылка-кнопка. Классы реализующие эти функции получаются добавлением к имени основного класса окончания отражающего действие с объектом: редактирование статьи: ArticleEditor, просмотрщик статьи - ArticleView и т.д.
  3. Мое «большое» приложение - абстракция. Вместо статей и новостей я ввел для примера три разных таблицы c данными: first,second и third. Соответствующие им семейства классов будут начинаться с First, Second и Third

Соглашение по работе с серверной частью

  1. Серверная часть лежит в директории /data/ архива. Это всего два файла - json для дерева и простенького php приложения, который работает с базой данных из двух таблиц. Для примера больше не надо.
  2. Всего используется три таблицы first, second и third. дамп базы данных лежит в корневой директории.
  3. По всем таблицам каждая запись имеет уникальный ID. В двух разных таблицах не может быть одного ID
  4. /data/sql.php?type=someTable вытаскивает построчно список данных из таблицы someTable. Детали см. в соответствующих разделах. В каждой строке выводятся все поля из базы, хотя в реальной задаче этого делать естественно не нужно. Данные для поиска и навигации по страницам передаются через POST
  5. /data/sql.php?type=someTable&one=someId - вытаскивает из таблицы someTable только одну запись id=someId
  1. 2012-03-15
  2. ExtJS-large-application
  1. Архив с примерами
  2. ExtJS4 с нуля
Go Index Test