deser Nov 8 2011 at 14:15

Руководство по мелочам в Ext JS

5 min

39K

ExtJS/Sencha*

From sandbox

+43

Comments 73

Rainum Nov 8 2011 at 14:32

У renderActivity вторым параметром является cell metaData. Поэтому расскрасить текст в ячейке можно так:

deser Nov 8 2011 at 14:33

как?

RuslanZavackiy Nov 8 2011 at 15:31

function(value, metaData) {
metaData.attr = 'style=«color: red»';
return value;
}

например так

deser Nov 8 2011 at 15:32

Спасибо!

nailyangazov Nov 8 2011 at 15:22

Опять на самом интересном месте!

vovs Nov 8 2011 at 14:36

Пожелает.
Работаю на ExtJS также, примерно год. Также накопились некие знания.
Но вот, по прошествии года, все таки, от ExtJS решил отказаться.

yroman Nov 8 2011 at 14:43

А что решили использовать взамен?

vovs Nov 8 2011 at 15:03

А ты знаешь, как таковой замены и нет в принципе. Просто ExtJs из цепочки Linux + Apache + PHP + MySQL выпадает. Какова максимальная скорость канала? Максимальная скорость канала равна максимальной скорости самого слабого звена. И вот в этом случае Apache и PHP отстают. Если действительно использовать ExtJs по «полной», то вместе Apache и PHP, лучше использовать nodeJS. А раз использовать nodeJS, то и базу mongoDB. И тогда действительно все встает на свои места. JSON — туда, JSON — сюда.

Вот только к таким переменам мы не готовы. Ни технически, ни морально :-)

deser Nov 8 2011 at 15:06

Да, скорость конечно не впечатляет. Зато разработка на фреймворке довольна быстра.

vovs Nov 8 2011 at 15:17

Тут даже не скорость, а идеология, подход, архитектура, что-ли. Ajax -> Apache копию стартует, в ней отрабатывает php. PHP делает запрос к базе, еще один язык. База возвращает, php — обрабатывает, и далее превращает свое представление массива в JSON. Айс?

Или как вариант Ajax -> Apache -> PHP -> возвращается Javascript ExtJS, который опять что то запрашивает у сервера и т.д. Нет вы конечно скажите что это плохой вариант. Но, по другому, следуя пути ExtJS, придется все объекты для всего сайта сделать в начале старта сайта. А если сайт не маленький, вкладок много, окон много. Ждем когда загрузится Ext, стили, потом создаем эти объекты. Айс?

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

deser Nov 8 2011 at 15:19

С языка сорвали :). Я тоже хотел добавить что на Ext JS лучше писать локальные приложения.

bildja Nov 8 2011 at 16:42

А сайт бить на приложения плохая практика? (я имею в виду Ext.application в терминах ExtJS 4).

knekrasov Nov 8 2011 at 17:27

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

bildja Nov 8 2011 at 18:24

Я имел в виду не клиентский и серверный.
Это было к этому:

> Но, по другому, следуя пути ExtJS, придется все объекты для всего сайта сделать в начале старта сайта. А если сайт не маленький, вкладок много, окон много.

Я тоже ещё новичок в ext js, мне интересно, как люди делают.

Veterinar Nov 9 2011 at 05:45

> База возвращает, php — обрабатывает, и далее превращает свое представление массива в JSON. Айс?

Айс.

> следуя пути ExtJS, придется все объекты для всего сайта сделать в начале старта сайта. А если сайт не маленький, вкладок много, окон много. Ждем когда загрузится Ext, стили, потом создаем эти объекты. Айс?

Четвертая версия, вроде как, вышла давно. Нет там такой проблемы. Вон у gmail время первого старта тоже высокое, это норм.

Rainum Nov 8 2011 at 14:37

var renderActivity = function(val, cell) {
	cell.style += val == 1 ? 'color: green;' : 'color: red;'
	return val;
}

Думаю, что нет смысла лишний раз гадить в DOM :) Прошу прощения за дубль.

deser Nov 8 2011 at 14:39

Спасибо, большое! Я сейчас активно развиваюсь в этом направлении. Если будут еще замечания — буду рад.

knekrasov Nov 8 2011 at 14:39

Статья, безусловно, предназначена для новичков. На мой взгляд, не хватает системности изложения. Почему бы не сгруппировать ваш посыл по следующим пунктам
1) Layouts (часто используемые, стандартные варианты использования)
2) xtype и отложенная отрисовка
3) вставка custom html, шаблонизаторы и (что было бы важно упомянуть) XSS уязвимости в ExtJS.

А так получилось некая каша в стиле cook book-советов, а не руководство для разработчиков.

Разрабатывая на Ext JS уже около года, я «съел не одну собаку».

Видимо, у нас с вами разные представления о «съеденных собаках»

deser Nov 8 2011 at 14:42

Полностью с Вами согласен. А собаки действительно у всех разные. Тем более, что активность разработки на Ext JS у меня была непостоянная в течение всего года.

piratus Nov 8 2011 at 14:50

ExtJS отличная библиотека, а всё что вы описали, если я не ошибаюсь, есть и в документации.

Чтобы понимать как что-то сделать надо внимательно читать документацию. Если недостаточно документации — смотреть в код. Там всё не так уж и запутано. Особенно если сравнивать с другими фреймворками на javascript.

deser Nov 8 2011 at 14:52

Лично мне пришлось вникать в фреймворк в считанные дни. И, честно говоря, поначалу я возненавидел Ext JS.

knekrasov Nov 8 2011 at 14:57

В документации практически ничего внятного нет (особенно это касается версий 2 и 3, которые как раз и рассматриваются в статье); только в примерах, которые как правило дальше Hello world не идут.

Поэтому исходники нужно смотреть практически всегда ;)

-1

deser Nov 8 2011 at 15:00

А еще хуже, если в исходниках нету того, что нужно сделать.

egorF Nov 8 2011 at 18:07

Ничего что сейчас актуальна версия 4.0, готовится к выходу 4.1 и документация по ним просто *огромная*?

knekrasov Nov 8 2011 at 20:07

Она, безусловно, лучше того, что было.
Hello world с ее помощью пишется замечательно. Но попробуйте, например, найти документацию к классу Ext.util.EventManager (это навскидку, что первое вспомнилось).

-1

bildja Nov 8 2011 at 20:28

Есть Ext.EventManager. Он находится легко:
на странице документации вверху справа в поле search начинаем набирать имя класса и находим.
А класса Ext.util.EventManager похоже и нет

knekrasov Nov 8 2011 at 20:40

Прошу прощения, описался: Ext.app.EventBus.
В доках к 4.0.6 commercial описания нет. В вашей ссылке (4.0.7) справка лаконично сообщает, что это private class (наконец-то). Молодцы, значит, все-таки пилят.

-1

coh Nov 8 2011 at 19:41

На сайте разработчиков есть интересные разделы www.sencha.com/learn/legacy/Ext_FAQ и www.sencha.com/learn/legacy/Tutorials там собраны советы на различные случаи жизни.

-1

deser Nov 8 2011 at 19:44

Этого не отнять, но согласитесь — чем больше раз напишут про некоторую проблему — тем быстрее найдет решение тот, кто столкнулся с этой проблемой.

piratus Nov 8 2011 at 14:58

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

deser Nov 8 2011 at 15:02

Чаще всего да, но я знаю случаи, когда люди в считанные дни разбирались в Ext JS (конечно на базовом уровне) и подключались к проекту довольно успешно. Так что все зависит от человека.

deser Nov 8 2011 at 14:54

А доки у sencha действительно неплохие. Но вот эти вещи мне пришлось долго искать. Статья призвана помочь разработчикам не копать документацию Ext JS каждый раз заново.

anotherpit Nov 8 2011 at 16:25

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

deser Nov 8 2011 at 16:28

Спасибо за информацию. Жаль что раньше такого не придумали.

MpaK999 Nov 8 2011 at 15:36

Использовал в течении полугода на проекте ExtJS, красиво конечно, удобно и приятно работать с модельками и шаблонами. Но так же пришлось отказаться, по причине тормозов на большом бизнесс приложении (CRM) все окошки с пятком табличек по 200-300 элементов начинали дико тормозить даже в Google Chrome.

Переписал всё на JQuery UI теперь летает, хотя и стало всё внешне попроще.

deser Nov 8 2011 at 15:45

На jQuery UI есть замена гридам и всему прочему? Или вы свои компоненты писали?

vovs Nov 8 2011 at 16:13

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

deser Nov 8 2011 at 16:17

Спасибо за ответ, а то я уже думал к jQuery присмотреться поближе.

MpaK999 Nov 8 2011 at 18:22

grid'ы я заменил на очень быстрый DataTable, умеет всё что надо от поиска, фильтров, сортировки, ajax и pagination.

А «остальное» я взял в JQuery UI благо все гармонично и легко настраивается.

В будущем думаю еще BonesJS стоит брать за каркас самого приложения, чтобы не городить самописный mvc

egorF Nov 8 2011 at 18:08

Попробуйте 4.1, там как раз вопросы производительности списков сильно решены.

UFO just landed and posted this here

bezumkin Nov 8 2011 at 16:18

Мне очень нравится MODX Revolution, не в последнюю очередь из-за того, что вся админка написана на ExtJS 3.4 — и это позволяет писать любые расширения для нее.

Получается очень богатый бэкэнд для управления сайтом. Заказчику можно реализовать что угодно. Загрузку прайсов в xls, графики работы врачей, точки продаж товаров — и все это будет единообразно выглядеть и работать.

Тем более, что в админке уже все заточено под комфортную разработку, даже заготовка в репозитории лежит.
Вот писал про это, с картинками habrahabr.ru/blogs/modx/126635/

Я в ExtJS совсем новичок, только-только изучаю. Работаю с ним только в MODX. Хотелось бы еще статей на данную тему.

deser Nov 8 2011 at 16:19

Будут Вам статьи. :)

aps Nov 8 2011 at 16:39

> что вся админка написана на ExtJS 3.4
Админка CMS на EXT — это очень жестоко по отношению к тем, кому придется админить.

-1

bezumkin Nov 8 2011 at 16:44

Категорически не согласен. Возможности дает — широчайшие.

Как правило, людям в админке нужны удобство и функционал, а скорость нужна на фронтенде. Там ExtJS не используется.

На мой взгляд, такая админка все равно быстрее, ибо редко перегружает страницы, имеет drug-n-drop в дереве ресурсов и еще огромное кол-во удобных фишек, которые экономят время.

aps Nov 8 2011 at 22:39

> Возможности дает — широчайшие.
разработчику дает. у юзера отнимает
> Как правило, людям в админке нужны удобство и функционал
оно сводится на нет потребляемыми ресурсами.
> а скорость нужна на фронтенде.
скорость нужна везде. спросите у любого, кому приходится постоянно и много забивать данные в админку.
Мне приходится. А вам?
> На мой взгляд, такая админка все равно быстрее
Ну да. Можно сделать еще хуже. Разве я спорю?
Только кто мешает сделать лучше?
==
CMS типа ModX предназначена для средней паршивости сайтов-визиток и магазинчиков. Контент-менеджеры и секретарши, которые их админят везеде и всюду имеют самые дохлые компьютеры.
По крайней мере за много лет работы никогда не видел у них хорошего комп.
Более 10 лет проработал в больших конторах типа Rabota.Ru. Магазинчики и визитки для мелких конторок тоже делал.
И нигде и никогда не видел нормального комп. у контент-менеджера. Только самые плохие и самые дохлые.
==

bezumkin Nov 8 2011 at 22:41

Словно песню Тани Булановой послушал — так тоскливо стало на душе…

deser Nov 8 2011 at 22:48

Грамотный заказчик заводит роботов, а cms так — чтобы поправить чего.

deser Nov 8 2011 at 22:49

И уж тем более, если заказчик затребовал cms на Ext JS — он обязан позаботиться о том, чтобы у контентщиков были нормальные компы.

aps Nov 10 2011 at 13:00

Ниша ModX — небольшие и дешевые сайты для самой широкой клиентуры, которая слов таких не знает как ExtJS и ModX Revolution.
Впрочем, это беда общая. UMI к примеру без ExtJS на слабых комп. не живет.

knight Nov 8 2011 at 16:46

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

vovs Nov 8 2011 at 17:00

Посмею возразить.
На мой взгляд именно для таких целей ее и стоит использовать. Если одним общим словом сказать, то оно будет звучать как «веб приложение»

PS:
У меня кстати был смешной случай. Сделанное приложение на базе Ext, я отдал знакомым протестировать. Знакомых много, разного уровня квалификации. Так вот, звонок. Девушка говорит — у тебя ничего не работает, все синее! Начинаю выяснять, оказывается, она пытается двойным кликом открыть что то в таблице, пытается совершить аналогичные действия, которые совершает в Windows. Сайт (приложение), производит выделение синим цветом содержимого части страницы. Девушка рапортует — ничего не работает, все синее. С одной стороны хорошо. Используются пользовательские навыки. Знакомый интерфейс. С другой стороны, вот такие вот комичные моменты.

knight Nov 8 2011 at 16:42

Статья для новичков, никаких узких мест — трудных для понимания или незадокументированных в эксте нет.

Экст отличный фрейм.

Можно лаконичней незачем дублировать код:

        store: new Ext.data.GroupingStore({
           root: 'banners',
           totalProperty: 'totalCount',
           idProperty: 'ID',
           fields: ['ID', 'is_active'],
           data: data
        })

deser Nov 8 2011 at 17:21

Статья для новичков — согласен.
Экст отличный фрейм — согласен.
Можно лаконичней незачем дублировать код — можно по всякому. Статься писалась ночью с 2-4, а в это время суток главное чтоб работало.

-2

anotherpit Nov 8 2011 at 17:58

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

Зачем для данных используется grouping store, если для отображения используется обычный, а не grouping view? Почему вы явно создаёте view, а не используете опцию viewConfig?

Обучение других (и особенно новичков) дело такое… Тут надо хорошо разбираться в предмете.

coh Nov 8 2011 at 19:10

Статья хорошая, но к сожалению не нашел описания подводных камней. Вот если бы вы рассказали что-нибудь из разряда: У Ext.data.JsonStore есть такое свойство pruneModifiedRecords, которое отвечает за очистку измененных Record когда Store перезагружается или когда запись удаляется. И главное — это свойство по умолчанию выставлено в false, что на практике может дать неожиданный результат при сохранении данных. Было бы интереснее, ведь таких вещей там достаточно много.

deser Nov 8 2011 at 19:15

В следующей статье обязательно напишу про камни. Спасибо за совет.

knekrasov Nov 8 2011 at 20:10

Или например, если вы решите реализовывать CRUD родными средствами Ext.data.Store (например, делая редактируемый грид) в стиле REST, то наткнетесь на весьма странное ожидаемое «подтверждение» операции со стороны сервера. Причем, ожидаемый ответ от сервера не документирован и судя по всему никак не настраивается. Лечится только собственной реализацией Reader'ов.

cachealot Nov 8 2011 at 21:29

Или например, вы столкнулись с тем что родные средства CRUD Ext.data.Store в режиме REST не умеют по умолчанию загружать картинки, приходиться использоваться дополнительные средства.

egorF Nov 8 2011 at 22:16

Это вы имеете в виду successProperty?

deser Nov 8 2011 at 20:51

Господа Ext-шники. Есть вопрос. При отправке данных формы на сервер не срабатывает условие success. Я так понимаю проблема в ответе сервера. Не подскажите в чем проблема?

miv89 Nov 8 2011 at 21:31

в ответе должен быть {success: true}

deser Nov 8 2011 at 21:33

Спасибо, завтра опробую.

deser Nov 9 2011 at 16:12

Спасибо еще раз. Действует.

zim32 Nov 8 2011 at 21:51

А что там в новых версиях по поводу написания своих компонентов? Все такой же темный лес? Как-то пытался я написать свой компнент. Документации было мало. В коде полный ужас… Чтобы написать что-то свое нужно буквально методом тыка кодить… Прототипное наследование сводит меня с ума.

deser Nov 8 2011 at 21:53

Если правильно использовать — то прототипное наследование хорошая вещь. Метод тыка — основной в Ext JS :).

-1

knekrasov Nov 8 2011 at 22:26

Вот отличная статья про написание компонентов в ExtJS 3. В свое время очень помогла.

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

Veterinar Nov 9 2011 at 05:47

> Все примеры проверены на Ext JS версии 3.4.

Дальше можно не читать. Самое вкусное появилось в четвертой версии.

knekrasov Nov 9 2011 at 11:28

Тут уже дело вкуса, извините за тавтологию :)
PS Сам пишу как под третью так и под четвертую версии.

arkady Nov 10 2011 at 01:53

Может вы напишите статью о разнице 3 и 4 версии? В которой опишите правильный старт и идеологию новой версии

arkady Nov 10 2011 at 01:50

Спасибо за статью, для меня сейчас это очень актуальная тема. Но! Почему ExtJS 3.4, когда уже четвертая версия в ходу? Для версии 3 — существует достаточно русской документации, даже видео уроки есть. Но посмотрев презентацию 4-ой версии на офф. сайте, я понял что там много чего поменялось в идеологии и начинающему мягко говоря не стоит рассматривать версии ниже 4. А для нее как раз ничего кроме офф. доков нет. Мне кажется, что намного полезней будет цикл статей по ExtJS, код которых не только «работает в ExtJS 3.4» но и идеологически выдержан в рамках новой версии

deser Nov 10 2011 at 15:02

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

UFO just landed and posted this here

Show the best of all time