<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="id" content=""/> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/> </head> <body> <div class="main"> <div class="wrap"> <div class="L"> <h1><a href="/">..</a> / ExtJS 4. С самого начала</h1> <div class="myContent mb2"><p> <strong>Предуведомление.</strong> Эти записки - краткий конспект того, что я делал когда изучал ExtJS. Поскольку понадобится не скоро, начал с четвертой версией, несмотря на многочисленные предупреждения о глючности, отсутствия литературы.<br/> </p> <p> Многое здесь было сделано не так как надо бы. Ничего сильно оригинального здесь найти нельзя. Практически все примеры содраны с <u class="external" title="docs.sencha.com/ext-js/4-0/#">официального сайта</u> и в отличие от правильных учебников, минимизированы по самые уши, чтобы отсеять всякую ненужную(?) шелуху. Все что здесь есть было написано в сентябре 2011 года, однако до сих пор мне не удалось выложить все в блог и я буду выкладывать все постепенно<br/> </p> <div class="small"> <ol> <li> <a href="/43.htm">Hello, ExtJS World!</a> </li> <li> <a href="/44.htm">Модальные сообщения (Ext.window.MessageBox)</a> </li> <li> <a href="/45.htm">Окна (Ext.window.Window) Часть 1. Конфигурирование, методы</a> </li> <li> <a href="/46.htm">Окна (Ext.window.Window) Часть 2. События</a> </li> <li> <a href="/47.htm">Пара слов об устройстве компонент ExtJS</a> </li> <li> <a href="48.htm">Лэйоуты. Как все красиво разместить внутри окна</a> </li> <li> <a href="/49.htm">Инструментальные панели. Часть 1. Кнопки</a> </li> <li> <a href="/50.htm">Инструментальные панели. Часть 2. Меню</a> </li> <li> <a href="/51.htm">Панель с закладками</a> </li> <li> <a href="/53.htm">GridPanel - таблички. Часть 1 локальные данные</a> </li> <li> <a href="/54.htm">GridPanel - таблички. Часть 2 Ajax</a> </li> <li> <a href="/55.htm">GridPanel - таблички. Часть 3 Редактирование полей</a> </li> <li> <a href="/56.htm">GridPanel - таблички. Часть 3 Редактирование полей (продолжение)</a> </li> <li> <a href="/57.htm">Form. Часть 1 - простые компооненты</a> </li> <li> <a href="/58.htm">Form. Часть 2 - составные компоненты</a> </li> <li> <a href="/59.htm">Form. Часть 3 - Submit</a> </li> <li> <a href="/60.htm">Деревья в ExtJS. Часть 1. Инициализация</a> </li> <li> <a href="/61.htm">Деревья в ExtJS. Часть 2. Drag & Drop / Навигация / Манипуляции c узлами</a> </li> <li> <a href="/62.htm">Навигация по DOM. Часть 1</a> </li> <li> <a href="/63.htm">Навигация по DOM. Часть 2</a> </li> <li> <a href="/64.htm">Манипуляции с DOM. Часть 1. Установка/чтение стилей, классов, атрибутов</a> </li> <li> <a href="/65.htm">Манипуляции с DOM. Часть 2. Добавление/удаление и пр. операции с узлами</a> </li> <li> <a href="/66.htm">Шаблоны в ExtJS.</a> </li> <li>ООП в ExtJS </li> <li> <a href="/67.htm">События в ExtJS</a> </li> </ol> </div> <p> UD. март 2011 Этот раздел потерял для меня интерес и я его оставил незавершенным. Я перешел ко второму разделу <a href="/ExtJS-large-application/">«Большое приложение» на ExtJS</a>, в котором создаю и комментирую набор классов, необходимый для создания типового приложения фронтофиса CMS,CRM или типа того. </p></div> <ol class="anounce"> <li class="clearfix"> <h2 title="2012-01-27 "> <a href="/76.htm">ExtJS + CodeIgniter Example of desktop</a> </h2> <div> <anounce>Простое приложение на базе ExtJS + CodeIgniter. Desktop + управление пользователями. Как ни страно но работает сразу после запуска.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2012-01-26 "> <a href="/75.htm">ExtJS: собственные классы, xtype и ленивая инициализация</a> </h2> <div> <anounce>Создание собственного класса, ленивая инициализация через xtype. В черновиках. Отсчет с древней статьи «20 правил, которым стоит следовать, когда начинаете работать с EXT JS & Sencha Touch»</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-11 "> <a href="/67.htm">15. События в ExtJS (немного об ООП)</a> </h2> <div> <anounce>Все события в ExtJS можно разделить на два типа. Первый — события DOM. С ними все прозрачно — для них существует отдельный метод типа jQuery.bind. Второй тип событий — собственные события ExtJS. Здесь рассматривается совсем чуть-чуть для затравки.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-11 "> <a href="/66.htm">13. Шаблоны в ExtJS</a> </h2> <div> <anounce>Мода на изобретение самых лучших, самых быстрых, самых понятных, самых самы и отличных от всех других шаблонизаторов, процветающая среди php-программистов плавно переползла в Python и Ruby, и 2-3 года назад в JavaScript. Я думаю, в скором будущем в JS следует ожидать портирования Smarty, Quicky,FastTemplate, TAL… и базаров, какой шаблонизатор лучше. Это грустно. Особенно грустно потому что более пяти лет мне практически не приходилось иметь дело с шаблонизаторами отличными от XSLT. Поэтому код который написан в этом примере у меня вызывает неудержимое чувство отвращения.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-11 "> <a href="/65.htm">12.2 ExtJS — манипуляции с узлами DOM. добавление, удаление узлов и т.п.</a> </h2> <div> <anounce>Когда пару месяцев назад писал эти записки, во всем что касается манипуляций с DOM было много нецензурных комментариев, я их удалил. Не то то свыкся с мыслю что придется иметь с этим дело, а скорее в реальной работе оказалось, что с этим дело иметь не придется. Ну а если все же придется, тогда скорее всего забуду все это как страшный сон и подключу что-то более дееспособное чем существующие в ExtJS методы.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-11 "> <a href="/64.htm">12.1 ExtJS — манипуляции с узлами DOM. Установка/чтение стилей, классов, атрибутов</a> </h2> <div> <anounce>манипуляции с узлами DOM. Установка/чтение стилей, классов, атрибутов в ExtJS. Опять же лаконичностью и простотой jQuery здесь не пахнет.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-11 "> <a href="/63.htm">11.2 Навигация по DOM в ExtJS. Разборки с Element/CompositeElement</a> </h2> <div> <anounce>Разборки с Ext.core.Element заняли у меня слишком много времени, потому что зациклился на поиске привычных по jQuery методов навигации по DOM в виде цепочек запросов</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-11 "> <a href="/62.htm">11.1 Навигация по DOM в ExtJS</a> </h2> <div> <anounce>Как ни странно этот раздел оказался одни из самых тяжелых. Привычка легко и просто работать с DOM в Prototype, jQuery и др., вызвало крайнее удивление того, с чем столкнулся в ExtJS.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-11 "> <a href="/61.htm">10.2 Деревья в ExtJS. Манипуляции с узлами</a> </h2> <div> <anounce>Рассматриваются добавление, удаление узлов, навигация по дереву, Drag & Drop.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-11 "> <a href="/60.htm">10.1 Деревья в ExtJS. Инициализация</a> </h2> <div> <anounce>Рассматривается три варианта загрузки — инициализация из статического объекта, инициализация из Ajax-запроса. И дополнительно вариант дерево совмещенное с таблицей.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-04 "> <a href="/59.htm">9.3 ExtJS: Форма. Submit</a> </h2> <div> <anounce>Пример сабмита формы сдернут с минимальными изменениями из книги «Ext JS 3.0 Cookbook», часть которой автор которую ее автор Jorge Ramon, выложил в открытый доступ. Спасибо, тебе Jorge Ramon!</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-04 "> <a href="/58.htm">9.2 ExtJS: Форма. Сложные (составные) элементы</a> </h2> <div> <anounce>Сложные (составные) элементы форм — это radio,checbox и combobox. Почледний компонент совмещает функции обычного листбокса, а также текстового поля с выпажающей подсказкой типа гугловского Ajax Suggest</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-04 "> <a href="/57.htm">9.1 ExtJS: Форма. Простые элементы</a> </h2> <div> <anounce>Лучше всего смотреть как работают элементы форм в официальной документации. Здесь я просто свел все примеры на одну страницу и по необходимости снабдил комментариями. Чуть более сложные компоненты я рассмотрю дальше.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-04 "> <a href="/56.htm">8.4 ExtJS: GridPanel — табличка с редактированием полей (продолжение)</a> </h2> <div> <anounce>Немного модифицирую предыдущий пример. Модификация будет заключаться в следующем: Вместо редактирования построчно, редактироваание будет вестись отедльно в каждой ячейке Синхронизация изменений будет выполняться не автоматически а по нажатию на кнопку «Save» Кнопка удаления будет размещена в каждой строке. Поехали.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-04 "> <a href="/55.htm">8.3 ExtJS: GridPanel — табличка с редактированием полей</a> </h2> <div> <anounce>Как правило В богатых приложениях таблицы используются не столько для отображения, сколько для управления данными — удаления, добавления, редактирования записей. В этом примере я попробую сделать табличку с возможностью редактирования, добавления и удаления полей. В качестве основы я взял пример с официального сайта, только немного сократил. Сейчас я попробую внести возможность редактирования данных на базе примера из предыдущей части, где выводился телефонный справочник. Код практически весь сохраняется, модификация не очень большая. Что меняется?</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-12-04 "> <a href="/54.htm">8.2 ExtJS: GridPanel загрузка данных из Ajax</a> </h2> <div> <anounce>Пример из первой части малоинтересен, потому что в больших приложениях, для которых рассчитан ExtJS данные выбираются из удаленных источников. В этой части разберу пример выборки таблицы по Ajax-запросу. Громоздить что-то в виде полноценного приложения с SQL не буду, а соберу маленький php-имитатор большой базы данных. А по ходу рассмотрения примеров буду его модифицировать, добавляя отсутствующие функции.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-11-29 "> <a href="/53.htm">8.1 ExtJS: GridPanel — типа таблички с данными</a> </h2> <div> <anounce>Мегатаблицы — один из главных элементов UI для любого большого приложения. Как и все в ExtJS компонент GridPanel имеет кучу самых разнообразных прибабахов в виде загрузки через Ajax, листалки страниц, возможности редактирования несколькими способами, группировки, фильтрации и т.п. Но в этом разделе я рассмотрю самую простую статическую таблицу.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-11-27 "> <a href="/51.htm">7. ExtJS: — Панели с закладками (Ext.tab.Panel)</a> </h2> <div> <anounce>Панель с закладками она и в ExtJS панель с закладками. С учетом назначения ExtJS всякие мулечки, запихнутые в аналогичные jQuery плагины излишеством не кажутся.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-11-27 "> <a href="/50.htm">6.2 ExtJS: Инструментальные панели. Часть 2. Меню (Ext.menu.Menu)</a> </h2> <div> <anounce>Большое приложение без меню — это и не большое и не приложение. В настоящих, больших приложениях, кнопки в верхней инструментальной панели обычно совмещены с выпадающими меню. Пример такой кнопки-меню приведен здесь</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-11-27 "> <a href="/49.htm">6.1 ExtJS: Инструментальные панели. Часть 1. Кнопки</a> </h2> <div> <anounce>Инструментальные панели — меню, кнопочки, статусная строка, которые обычно располагаются в верхней и нижней части большинства приложений — вполне самостоятельный компоненты, которые позволяют оживить окна.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-11-12 "> <a href="/48.htm">5. ExtJS лэйоуты (Ext.layout.container)</a> </h2> <div> <anounce>Окно Ext.Window может содержать несколько панелей Ext.Panel, каждая из которых может быть составной и в свою очередь содержать другие панели. Нужно понять как правильно размещать панели в пределах окна.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-11-12 "> <a href="/47.htm">4. Пара слов об устройстве компонент ExtJS</a> </h2> <div> <anounce>Тут наверное надо немного разобраться в иерархии компонент ExtJS. Всего пару, чтобы можно было двигаться дальше. Для примера разберу самое простое — встраивание панелей в окна</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-11-12 "> <a href="/46.htm">3.2 Окна ExtJS (Ext.window.Window). События</a> </h2> <div> <anounce>Здесь я рассматриваю самый простой и очевидный способ привязки событий к компоненту (в данном случае это окно Ext.window.Window). Но позже нужно будет заняться событиями плотнее в отдельной части.</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-11-12 "> <a href="/45.htm">3.1 Окна ExtJS (Ext.window.Window) Конфигурирование, методы</a> </h2> <div> <anounce>Часть 1. В этой частия я разбираюсь с конфигурированием всплывающих окон (Ext.window.Window), и основными методами управления ими</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> <li class="clearfix"> <h2 title="2011-11-12 "> <a href="/44.htm">2. Модальные сообщения в ExtJS. Ext.window.MessageBox</a> </h2> <div> <anounce>На этой странице сразу несколько примеров с различными модальными окнами-сообщениями — аналогами стандартных javascript-функций confirm, prompt и alert</anounce> </div> <ul class="tags"> <li> <a href="/ExtJS-4/"> <span>ExtJS 4. С самого начала</span> </a> </li> </ul> </li> </ol> <div class="pager"><span class="page">Страницы: </span> <span class="current">1</span> <a href="/ExtJS-4/25">2</a> <a href="/ExtJS-4/25"><span class="first next_link">»</span></a> </div> </div> </div> <div class="R"> <a href="/" title="На главную"/> </div> </div> <div id="li"/> </body> </html>