Добрый день всем! Хочу рассказать о моем недавно написанном расширение костыле для javascript фреймворка ExtJs. Зачем он мне вдруг понадобился: встала задача сделань редактирование урлов в форме, чего может быть проще- обыкновенный textfield, но не тут- то было.., он должен быть еще и кликабельным =). Можно конечно было где-то рядом с полем выводить урл, но тривиальность такого подхода не понравилась, и решил изобретать свой лисопед. И так вот что получилось

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

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


Наш будущий плагин будет прослушивать события текстарии на событие keyup и будет использовать свойство maxLength и метод getValue() для подсчета кол-ва символов, введенных в текстарию. Кол-во введенных и максимальное кол-во символов будет выводиться в div элементах под текстарией.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

На днях (каюсь пропустил) обновился ExtJS до версии 3.1.1, и ExtGWT 2.1.1 (release notes)

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Многие знакомы с замечательной библиотекой jQuery. Многие знают как она незаменима при программировании интерфейсов.

Один из самых удобных моментов в jQuery я думаю это Live Events. Реал тайм события. Хотелось бы иметь нечто похожее не только в jQuery, но и в ExtJS. В ExtJS это есть, но не все об этом знают / догадываются/ используют.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Один из наиболее мощных визуальных паттернов, доступных разработчикам, является “Drag and Drop”. Мы постарались представить простой пример использования функции перетаскивания. Здесь представлены 5 шагов, которые это красиво реализуют.

Определение drag and drop
Действие перетаскивания (drag), обычно является нажатием с удержанием кнопки мыши на какой-либо графический элемент с его последующим перемещением. Действие бросания (drop) происходит когда вы отпускаете кнопку мыши. На высоком уровне, решения операции drag and drop может быть представлено следующим образом:

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Есть в ExtJS компонент — Ext.Window, который является окошком. И есть у него тело (свойство) — body, у которого есть метод mask(), потому что он Ext.Element. Этот метод накрывает окошко пеленой, намекая пользователю что надо чего-то подождать. Можно так же вывести некий текст, объясняющий чего собственно приходится ждать. Для этого нужно передать в метод строку сообщения.

Так вот, нужен был мне такой метод, который сообщал бы об ошибке именно для этого окна, не действуя на другие части интерфейса. Но при этом требовал отклика пользователя, т.е. чтоб у пользователя небыло подозрения «что-то не работает», а он знал «ага, вот это не работает и вот почему!». Этот метод должен легко вызываться и шустро отрабатывать, а заодно быть частью класса окна. Т.к. одновременно работающих окон может быть много, то стандартные средства сообщения об ошибке(Ext.MessageBox), ввиду их модальной работы, мне не подходили даже близко.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Огромное количество расширений для ExtJS. Много примеров кода, все наглядно, понятно, красиво. Всем советую!

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

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

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Самое сложное в любой работе — это начать её. Итак, с чего же начать наше огромное клиентское приложение? В этой части я расскажу с чего начать и затрону три темы: Как организовать код, Что такое фасад, как его построить, что такое компоненты (и, конечно, как их начать писать).

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

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

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
•