knekrasov 7 сен 2011 в 10:59

Принципы написания приложений на ExtJS 2.x/3.x

6 мин

9.2K

JavaScript*

Из песочницы

+43

Комментарии 22

Selmaril 7 сен 2011 в 12:30

Сложно тут с чем-то не согласиться, но хотелось бы вступиться за Ext.getCmp(). Все же иногда без этого никуда, например если у вас с помощью Ajax пришел идентификатор компонента, но этого компонента может уже (или ещё) не сещёствовать. Не всегда можно прицепить ссылку на компонент в калбек и прочее. На точках входа Ext.getCmp() лучший способ безопасного доступа. Внутри же кода — да, люто рвать руки под самые ягодицы!

Про xtype — полезно помнить что это не просто ещё один способ создания компонентов. Вы так же можете искать по коллекциям имеющихся компонентов с помощью этого свойства. Очень полезно когда вам нужно всем компонентам какого-то типа что-то сделать (хотя бывает что правильнее это делать с помощью instanceOf). Вообще стоит помнить что все что вы там понасоздавали хранится где-то в менеджере, и глобальные штуки (например закрыть все все все окна) можно сделать довольно простым обходом коллекции в менеджере (а ещё лучше использовать встроенные возможности MixedCollection, чем почти все коллекции и являются).

Я рекомендую всем кто садится за ExtJS освоить MixedCollection и его возможности. Многое в ExtJS построено на его основе, и возможностей удобного манипулирования он дает тьму. Да и очень быстро прийдет понимание что везед все делается практически одинаково.

Насчет config, вставлю 5 копеек. Бывает нужно добавить множеству разнотипных классов общей набор свойств. Это очень просто делать используя «множественное наследование»:

Ext.ns('Util');

var myConfig = { vipField: «Hello», whoIsVip: function () { alert(this.vipField); } };

Util.MyPanel = Ext.extend(Ext.Panel, myConfig);
Util.MyButton = Ext.extend(Ext.Button, myConfig);
Util.MyField = Ext.extend(Ext.form.Field, myConfig);

Как-то так, пример натянут. Но мне помогло как-то добавить общую логику кнопкам и менюшкам. Extend и Override — великая сила.

Вообще с ExtJS главное стремиться к красоте и не бояться залезать в кишки.

Ну как-то так, а за статью спасибо! Года 3 назад я бы читал с блеском в глазах +)

knekrasov 7 сен 2011 в 12:37

Рад, что вам понравилось.
Пример с Ajax имхо не самый удачный: сервер в идеале не должен знать об особенностях клиентской части, а уж DOM id отсылать с сервера — идея особенно сомнительная.

В остальном с вами согласен. Во внутренности залезать надо, особенно при отсутствии внятной документации :)

diamant 7 сен 2011 в 12:52

Принципы написания приложений на ExtJS 2

Уже ж четвёртая версия вышла, зачем учиться второй?
Не понял примера с ref — свойство только описывается, но никак не используется в примере.

knekrasov 7 сен 2011 в 12:59

4-я версия только обкатывается, да и кодовую базу на более старых версиях еще никто не отменял.

Не понял примера с ref — свойство только описывается, но никак не используется в примере.

Присмотритесь к методу showMainScreen из того же примера.

diamant 7 сен 2011 в 13:21

Да, спасибо, не заметил.
Искал использование строковой константы типа this.down('editBtn').enable();
А с вложенностью как? Если вдруг по каким-нибудь причинам (layout поменять) придётся засунуть требуемый компонент в контейнер, то к ref добавлять соответственно "../"?

knekrasov 7 сен 2011 в 13:28

Если хотите, чтобы реальная ссылка осталась на том же уровне, то да, в ref добавляется ../

egorF 7 сен 2011 в 20:26

Обкатывается сейчас версия 4.1, а четвертая мало того что давно уже вышла, так уже после нее уже опубликовано ШЕСТЬ минорных версий. Не тормозите:)

knekrasov 7 сен 2011 в 21:24

И не пытаюсь Хотите сникерс? :)
Под обкатанностью я имею в виду объем кодовой базы на этой версии и насколько вменяемые советы можно нагуглить в том или ином случае. Да и статья — своеобразный «крик души» после всего, что приходится поддерживать или рефакторить.

Selmaril 7 сен 2011 в 13:00

ref будет использоваться как-то так:

var panel = new Util.MyPanel();

panel.editBtn.disable();

вместо:
panel.buttons.items[0].....disable(); // как-то так

Да и в примере это показано:

 

showMainScreen: function () {

 this.getLayout().setActiveItem('mainScreen');

 this.editBtn.enable(); // Вот тут обращение по ссылке

 }

А ExtJS 3 будет ещё долго актуальна. И большинство принципов описанных тут подходят и для 4-ки.

Kite 7 сен 2011 в 13:37

Пара моментов.
1) По поводу документации ExtJS(Sencha) не соглашусь. Вполне себе удобно и кстати очень положительно формировать такую документацию из своего кода. Т.е. желательно писать самодокументируемый код. Для этого посмотрите (относительно ExtJS до 4 версии) проект ExtDoc. Для больших проектов — незаменимая вещь
2) Function.createDelegate(object) — хорошая функция, но, пользоваться ей надо с умом. Если такую функцию поставить в цикле или еще хуже в рекурсивной функции — получите проблемы по скорости. Там, где возможно лучше пользоваться методами apply и call.
3) В примере функции, корректно отрабатывающей отрисовку компонента как вариант можно писать не this.on('afterrender', fn, this); а this.on('afterrender', fn, this, { single: true });
в этом случае обработчик будет удален после первого срабатывания.

knekrasov 7 сен 2011 в 14:01

Спасибо за ответ

По поводу документации основная претензия не к оформлению, а к тому, как она написана. Если коротко, то кроссзависимость между различными свойствами в config-объекте, как правило не отражены совсем. То есть ожидаемое поведение компонента из их документации вычленить в принципе нельзя (за исключением тривиальных случаев).
Кстати говоря, документация к ExtJS 4 не в пример лучше, там даже вменяемые примеры прилагаются.
Разумеется, с умом :)
Интересный метод, спасибо. Хотя в случае с afterrender это и не так критично.

Kite 7 сен 2011 в 14:09

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

По поводу afterrender да, не критично. Хотя если такое вдруг повесить на 'show' или 'activate' — можно и забыть.

Кстати, для отладки советую посмотреть плагин для файрбага — Illuminations

egorF 7 сен 2011 в 20:29

ExtJS 3, а тем более 2 — это уже прошлое и его не вернуть.

Обратите внимание на современную версию ExtJS: там многие такие моменты приведены в единообразие и выглядят весьма проще. В частности, Ext.up/Ext.down стал стандартом. Я сейчас пишу большой проект на ExtJS 4 после использования ExtJS 3 и ExtJS 2 — и, конечно, четверка приятнее.

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

knekrasov 7 сен 2011 в 21:26

Мне тоже 4-ка понравилась больше. Хотя и не без своих проблем.

slayerhabr 8 сен 2011 в 05:28

Насколько я понимаю (исходя из www.sencha.com/products/extjs/license/) бесплатно использовать ExtJS можно только в GPL3-совместимых проектах.
Верно ли это?

knekrasov 8 сен 2011 в 13:29

Я не специалист в этой области, но звучит не совсем так.
Для некоммерческих проектов можно использовать бесплатную версию (по GPL3-совместимой лицензии) Ext/Sencha. При этом ваш проект не обязан быть полностью GPL3-совместимым, насколько я понимаю.

slayerhabr 9 сен 2011 в 23:17

я тоже так понимаю. т.е. если проект коммерческий (зарабатываем на нем деньги) — будь добр — покупай платную лицензию

Coper 12 сен 2011 в 12:26

Хотелось бы немного более детальную статью. Некоторые описанные вещи честно говоря не понял, видимо рассчитано на уже хорошо продвинутого ExtJs программера. Может вы бы могли все же по каждому из пунктов добавить примеры вида: 1. Как не надо делать 2. Как надо переписать чтобы все было круто.

knekrasov 12 сен 2011 в 13:30

Расчет был действительно на человека, в целом знакомого с ExtJS. Акцент был сделан на архитектуру приложения (чем лучше пользоваться, как избавляться от лишних зависимостей, как уменьшить сложность поддержки).

Если будет интересно, могу действительно расписать эти пункты подробнее с примерами.