0,0
рейтинг
18 ноября 2011 в 18:43

Разработка → 20 правил, которым стоит следовать, когда начинаете работать с EXT JS & Sencha Touch из песочницы


Эта статья — перевод статьи из блога www.swarmonline.com с небольшими моими дополнениями

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

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

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

Хотя явно мы говорим только о Ext JS, большинство (если не все) пункты могут быть применены к Sencha Touch, так как структура фреймворков похожа.

Избегайте использования Ext.getCmp


Не поддавайтесь соблазну дать всем вашим компонентам идентификаторы и использовать Ext.getCmp, чтобы находить их снова. Если структура вашего приложения корректна и соблюдены принципы объектно-ориентированного дизайна кода, у вас не должно быть проблем с доступом к вашим компонентам, когда они понадобятся.

Полезные ссылки:
Writing a Big Application by Saki
Component Communication Example by Saki

Избегайте использования owneCt свойства


Не полагайтесь на свойство ownerCt для получения родительского элемента. Если вы пытаетесь получить в коде компонента доступ к родителю, то скорее всего этот код должен быть в самом родителе. Это очень похоже на использование Ext.getCmp (описано выше), так что убедитесь, что прочитали указанные ссылки.

Не делайте обрамляющие панели.


Очень распространённая ошибка у новичков — это создание обрамляющих панелей. Думайте о структуре интерфейса и помните, что такие компоненты как FormPanel, GridPanel и TabPanel наследуются от класса Panel, и потому нет нужды оборачивать их ещё одной панелью. Они могут быть размещены там же где их общий предок и сконфигурированы такими же свойствами.

Будьте аккуратнее со спагетти кодом (областью видимости).


Не объявляйте все ваши компоненты в одном файле или вложено (inline) — это станет кошмаром при отладке и ваша область видимости будет повсюду. Сделайте всё проще, разнеся объявления компонентов по разным файлам, а так же расширяйте базовые классы для добавления собственной конфигурации, методов и моделей поведения. Таким образом вы можете просто инстанцировать ваши компоненты где угодно, они получатся красивыми и слабо связанными

Примечание переводчика.
Очень часто появляется желание объявлять компоненты вложено, используя xtype
Ext.define('App.window.CreateMan', {
    extend : 'Ext.panel.Panel',	
    require : ['App.models.Man'],	
    items : [{
        xtype : 'textfield',
        label : 'Имя'
		}, {
			xtype : 'textfield',
			label : 'Фамилия'
		}, {
			xtype : 'button',
			text : 'сохранить',
			handler : this.saveData
		}
	],	
	saveData() {
		//...
	}
});
Выглядит вполне сносно. Чуть позже вы добавите ещё поле для ввода отчества. Потом выпадающий список с выбором гражданства. А к списку подключите плагины… В итоге получите кучу вложенного кода. В проектах которые мне достались, вложенность доходила до четырнадцати уровней. В случае, когда приходилось отлаживать такой код, я сначала делал основательный рефакторинг.
Важно поймать момент, когда стоит вынести элементы в метод initComponent
Ext.define('App.window.CreateMan', {
    extend : 'Ext.panel.Panel',
    require : ['App.models.Man'],
    initComponent : function () {
        this.callParent(arguments);
        var superPanel = Ext.create('App.util.SuperPanel',
                // конфиги сложной панели
            );
        var saveButton = {
            xtype : 'button',
            text : 'сохранить',
            handler : this.saveData,
            // ещё конфиги кнопки
        };
        items = [{
                xtype : 'textfield',
                label : 'Имя'
            }, {
                xtype : 'textfield',
                label : 'Фамилия'
            },
            superPanel,
            saveButton
        ];
    },
    saveData() {
        //...
    }
});



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

Убедитесь, что используете пространства имён.


Опять же: организация — наше всё. Использование встроенных возможностей пространств имён Ext JS позволит организовать компоненты и классы, так что в будущем будет легко ориентироваться в них. Скорее всего вы захотите разделить пространства имён по функциональным модулям, например пространство имён MyApp.Users для всего кода, работающего с пользователями. Я так же люблю создавать структуру каталогов, соответствующую пространствам имён. Тогда всегда легко искать нужный модуль.

Примечание переводчика.
В Ext JS 4 так же реализована автоматическая подгрузка, которая требует соответствия пространств имён и каталогов. Это позволяет вызывать метод Ext.create(‘App.modules.User’) даже если класс App.modules.User ещё не подгружен. Ext сам позаботится о загрузке.
Подробнее тут


Правильно использование Get/Set методов и статических переменных


Не поддавайтесь соблазну углубиться в коллекцию элементов компонента для получния ссылки на кнопку или панель, используя синтаксис подобный ‘comp.get(0)’ или ‘comp.getTopToolbar().get(1)’. Если вы когда нибудь добавите новый элемент в такую коллекцию, ссылки на такие элементы будут некорректны. В больших приложениях это станет огромной задачей по отлову багов.

Спасти себя от ненужных проблем, вы можете создав Get метод для необходимых компонентов, который будет копаться в коллекции. Когда вы добавите новые компоненты, вы будете обновлять только этот метод. Если вы не ратуете за ленивое инстанцирование ( lazy instantiation), можно определить необходимые кнопки и элементы как члены класса и таким образом не нужно будет делать никаких изменений при добавлении в коллекцию.

Примечание переводчика.
Что бы добавить потомка как член класса, можно просто перенести его из конфига...

Ext.define('App.window.CreateMan', {
    extend : 'Ext.panel.Panel',
    
    items : [{
            xtype : 'panel',
            // другие свойства панели
        }
    ]
    // ...
});

… в метод initComponent
Ext.define('App.window.CreateMan', {
    extend : 'Ext.panel.Panel',
    initComponent : function () {
        this.childPanel = Ext.create(/* ... */
            )
    }
    // ...
});

Таким образом вы получите ссылку на потомка непосредственно в объекте класса.


Создавайте xtypes аккуратно


Указывайте xtype такой же как имя вашего класса, включая пространство имён. Так вы сможете легко отследить фактическое определение класса

Используйте код повторно


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

Не создавайте вложенных функций


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

Научитесь использовать FireBug


… или инструменты разработчика WebKit. Убедитесь, что вы используете все браузерные инструменты, такие как FireBug для отладки JavaScript и для понимания того, какой код HTML и CSS генерирует фреймворк. На начальном этапе изучения очень легко забыть, что весь Ext генерирует разметку страницы, но инструменты позволят вам понять, что происходит внутри чёрного ящика. Если вы научитесь использовать эти инструменты и как проводить отладку JS эффективно, вы сохраните себе огромную кучу времени.

Превратите фреймворк в Белый Ящик!


Как сказал Эван «Не бойтесь исходного кода». Используйте полученные в работе с FireBug'ом навыки, чтобы залезть внутрь Ext JS фреймворка, а не перешагивая вызовы его методов в отладчике. Это невероятно, как много вы можете узнать и как легко вы можете решить проблему заходя внутрь метода фреймворка, не говоря уже о избавлении от часов стресса в попытках выяснить в чём именно проблема.

Всегда держите открытой документацию


Документация — это ваш лучший друг. Она должна быть вашей первой остановкой, когда вы сталкиваетесь с проблемами или ищете что-то новое. Она хорошо продумана и проста в навигации, так что используйте её!

Примечание переводчика.
Очень удобно в хроме создать приложение с документацией, так как её интерфейс использует вкладки.


Этапы отладки


Какие должны быть действия при решении проблемы:
  • Проверьте ваш код (очень легко допустить орфографические ошибки в настройках, пропустить команды и так далее).
    Примечание: кто как и я использует notepad++ есть замечательное решение для проверки JS на ошибки и предупреждения
  • Обратитесь к документации (возможно вы пропустили некоторые опции в конфигурации)
  • Загляните в исходный код во время отладки (сделайте точку останова перед местом, где происходит ошибка и посмотрите, что идёт не так. Вы наверняка найдёте пропущенный конфиг или вызов чего-то, что ещё не инстанцировано)
  • Ищите на форуме (скорее всего кто-то уже сталкивался с подобной проблемой и спрашивал о ней)
  • Ищите по всему вебу (если форум не смог помочь, возможно ответ есть в Сети)
  • Создайте топик на форуме (если вы так и не нашли решения, то максимально полно опишите проблему на форуме, что бы людям было проще помочь)


Стройте интерфейс постепенно.


Очень легко углубиться в работу и создать полдюжины компонентов, а потом открыть в браузере и посмотреть результат. Если не работает, то порой бывает крайне трудно двигаться в обратном направлении в попытках найти виновника. Мы предлагает создавать по одному компоненту и двигаться дальше после того, как убедитесь, что всё работает. Например, если вы хотите создать DataGrid, добавление элементов в который будет анимированой, то создайте сначала добавление и потом уже разбирайтесь с анимацией. Если вы попытаетесь сделать всё и сразу, скорее всего что-то пойдёт не так.

Минимизируйте и упаковывайте (GZip) ваш конечный код


Мы рекомендуем размещать все компоненты в отдельных файлах. Это значит, что вы получите кучу запросов, потому убедитесь, что все скрипты сшиты в один файл. Тогда вы минимизируете количество запросов и сожмёте размер кода.
После этого убедитесь, что ваш сервер поддерживает GZip для ваших скриптов. Это позволит уменьшить размер загружаемого кода на 70%!

Не модифицируйте код фреймворка!


Копайтесь в нём, читайте его, тестируйте его, изучайте его, но НИКОГДА не модифицируйте его. Если вы начнёте делать правки в ядре библиотеки, неважно в JS или CSS, вы заложите бомбу замедленного действия в ваше приложение. Когда вы обновите фреймворк до новой версии и ивсе изменения будут потеряны, вы будете долго выяснять как всё работает.
Если вы хотите изменить поведение или вид фреймворка делайте это через переопределение классов (это могут быть JS или CSS классы) или методов, помещённых в отдельные файлы. Впоследствии вы сможете легко удалить эти классы и методы и легко отследить их, когда дело дойдёт до обновления фреймворка.

Используйте плагины и пользовательские расширения


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

Определяйте общие элементы в одном месте


Очень удобно определять в одном конфиг-файле все ваши переменные, пространства имён и другие конструкции, которые используются повсеместно в программе. Это позволит намного проще изменять их и поощеряет повторное использование.

Рассмотрите использование Ext.Direct


Ext.Direct — это потрясающая особенность Ext JS, которую мы очень рекомендуем использовать с самого начала. Она даёт такие преимущества как прирост скорости, уменьшение кода и упрощение взаимодействия с сервером. Если вы подумываете использовать его в будущем, не надо! Начните использовать его прямо сейчас. Это гораздо легче реализовать с самого начала, нежели внести в работающие приложения. Вы будете благодарить нас в долгосрочной преспективе.

Тестируйте во всех браузерах!


Хотя Ext JS позаботился о практически полной кроссбраузерности, всегда тестируйте все браузеры, особенно IE. Как и всегда в IE некорректно работают некоторые CSS правила, а лишние запятые будут ломать ваше приложение.
Дмитрий Мананников @MrSLonoed
карма
–1,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (50)

  • +9
    Забыли ещё одно правило: 10 раз подумать прежде, чем вообще связываться с ExtJS.
    • +1
      Альтернативы?
      • –1
        dojo?
        • +2
          Писал как-то на dojo простенькую формочку с автозаполнением чекбоксов. В доджо я больше ни ногой.
      • 0
        qooxdoo?
        • 0
          И чем лучше?
          • –1
            Не лучше, а альтернатива; прежде всего, он бесплатен, в отличие от ExtJS.
            • –2
              у экста только саппорт платный
              • +1
                Ваши заказчики/вы сами готовы открывать код разрабатываемых приложений? Там ведь GPLv3.

                Although the GPLv3 has many terms, the most important is that you must provide the source code of your application to your users so they can be free to modify your application for their own needs.

                www.sencha.com/products/extjs/license/
                • +1
                  Ну, так если вы зарабатываете деньги на этой библиотеке, почему не хотите за нее сами заплатить?
                • –1
                  Использовать и подключать можно. Создавать расширения можно. Распространять можно.

                  По требованию нужно будет показать модифицированные исходники, если модифицирован исходник самого фреймворка.

                  Это для того, чтобы не плодились производные платные фреймворки и прочие нахлебники.

                  Единственный краеугольный момент — расширение классов фреймворка попадает под модификацию. А начиная с 4.0 у них все уроки и мануалы предлагают Ext.extend на каждом шагу.
                • +1
                  А разве браузер не отдает код при загрузке страницы? Это же javascript, причем именно фронтенд, как я понимаю? Не думаю, что лицензия распространяется и на serverside-код приложения.
                • 0
                  Исходный код должен прилагаться, если вы распространяете свое ПО. Не знаю, распространяется ли это на случай, если модифицировання библиотека используется на одном конкретном сайте.
        • +7
          По богатству виджетов и общей проработанности никто не может составить конкуренцию ExtJS.
      • 0
        Конечно же YUI3, вот посмотрите www.youtube.com/watch?v=2V9-g8JuBZc
    • +5
      Уже давно вижу на Хабре такие коментарии, но так и не понял почему не связываться? Мне сейчас достались ужасно написаные на эксте работы, но самим фреймворком я доволен. Собственно альтернативы для быстрого создания сложных CRM и ERP вебсистем я не вижу. Минусы есть — баги в библиотеке. Но исходники отлично задокументированы и если чтото не нравится можно просто написать свой кусок.
      • +7
        Основная на мой взгляд пробелма с ExtJS состоит в его идеологии, а именно в попытке дать инструмент создания полноценных десктопных приложений, но в броузере. Нам дают мощный инструмент, используя который по определённым правилам мы можем быстро и легко программировать сложные интерфейсы(даже в специальных полувизуальных редакторах) и логику к ним. Вот только вся соль в 'определённых правилах'.
        Рано или поздно ваши потребности начинают превышать возможности фреймворка и тогда приходит Беда. С большой буквы. Чтобы сделать что-то, не предусмотренное фреймворком, нужны либо костыли, либо громоздкие настройки над существующими компонентами, причём на создание их времени в любом случае уйдёт в разы больше, чем если бы вы вообще не использовали Ext.
        Затем кастомизация. Хотите подружить Ext с вашим красивым сайтом? Пожалуйста, вот вам дефолтная синяя тема, вот вам серая тема, и вот ещё несколько каких-то других. Хотите больше изменений, другую вёрстку, другие палитры или ещё чего-то — легко, делайте сами, но помните про Беду.
        Далее, периодически выходят новые версии. Иногда они ничего не ломают, и обновление проходит глано, но чаще ломают, и чем больше у вас кода на Ext, тем больше придётся переделывать и допиливать при апгрейде.
        Так же есть баги. Они есть в текущей версии. Просто в текущей, не важно какая там сейчас. Многие из багов заботливо изложены на форуме и превратились почти что в фичи, хоть некоторые из них могут и пофиксить быстро, но некоторые будут висеть(точнее не будут, а уже висят) годами. Придётся фиксить самим, но в исходники лезть — нини. Тронете — забудьте об обновлениях. Тогда следуем совету из данного топика, наш выбор — копипастить компоненты в кастомные со всеми потрохами. Которые с каким-нибудь релизом обязательно изменятся и всё опять поломается.
        Про мдленную работу Ext и упоминать не буду — это извечная тема, о которой только ленивый не писал.

        Впрочем, если вы не планируете обновляться и пишете только CRM, да ERP, с которыми никто, кроме ваших коллег или сотрудников заказчика, работать не будут, а так же если вы готовы инвестировать своё время в изучение технологий, которые для других вещей в вебе подходят не очень, то почему бы и нет — работать Ext будет и будет достаточно хорошо. Находясь в рамках заданных правил программировать на нём можно достаточно быстро.
        • 0
          С большей частью пунктов согласен. Не соглашусь с копипастой компонентов, расширение имеющихся делается вполне в стиле наследования ООП с классовым наследованием.
          Собственно кроме применения во внутренних системах ext особо нигде и не нужен.
        • +2
          Не обязательно тянуть со всеми потрохами. Я случайно обнаружил следующую возможность Ext:
          /**
           * Класс аналогичен классу Ext.data.proxy.Ajax
           * за исключением того, что все запросы этого класса
           * выполняются с помощью POST
           */
          Ext.define('Ext.data.proxy.Ajax',
          {
              extend: 'Ext.data.proxy.Ajax',
              alias:  'proxy.ajax',
          
              actionMethods:
              {
                  create : 'POST',
                  read   : 'POST',
                  update : 'POST',
                  destroy: 'POST'
              }
          });
          Таким образом на класс можно наложить требуемый патч. Очень помогает в борьбе с глюками ExtJS.
        • +2
          беда настанет только в том случае, если разработчик умеет писать только на extjs и не знает html/js/css. Такой разработчик сделает виджет состоящий из 10 панелей с супер сложным лайаутом, который любой современный браузер будет рендерить кучу времени. А всего-то нужно сделать обычный хтмл темплейт и реализовать на его основе виджет, но это гораздо сложнее, ведь так?
        • 0
          Вот мне нравятся такие БЕДА-лаги. Фреймворки — зло!!! Мы будем писать все сами!!! Зачем мне фремфорки, я знаю ЖС и сам все могу написать!!! Они такие ОГРАНИЧЕНЫЕ, у них «определенные правила»!!! А ЖС дает столько свободы!!! Они такие медленные!!! Мне на их обучение приходится тратить столько времени!!! А я и так пол жизни убил на изучение ЖС, мне еще за него деньги вернули ))

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

          И потом медленными и уверенными шажочками в вашем жсном детище появляются и «определенные правила» и проблема с кастомизацией и обновленгия и баги и все все все все… Вот только в отличии от злобных фремворков — остаетесь вы со своим борохлом один на один и нет никакого камьюнити, и нет гугла, в который можно вбить «большая проблема с моим борохлом». А обратись вы к комуто с вопросом — глянь друг, 3тью ночь не сплю, не могу найти проблему — Матерь божья, это что такое, это ты сам такое написал, ну ты крутой, ну ты мужик, ну ты кремень, ну ты молочага. Я не такой крут, так что давай-ка наверно сам %)

          А еще прикольно размещать объявления о поиске работы «ищу жсника, который рубит в самописных фреймворках»

          Уххх… как меня понесло… Прости, ты не виноват, просто уж очень часто я подобную песню слышал, решил подиграть…

          Подитожим… Фремворки, популяризированые, пишут же не идиоты, в частности у екстжсников там за плечами не одно детище + комьюнити, которое поддерживает, разбирается, помогает разбираться.И хватит быть борцм за свободу, правила пишутся для достижения цели людьми эту цель уже достигшие, и почему бы к них не поучится :)

          Всем спасибо…
  • +2
    Всё верно, я бы ещё добавил несколько пунктов:

    1. Изучите, что за метод такой mon() и почему он иногда очень полезен.
    2. Пишите скрипты сборки проекта, чтобы можно было собирать версии с разным набором внутренних модулей.
    3. Тщательно изучайте код, найденный на форуме ExtJS, например, перед его добавлением в проект. Аналогично про расширения.
    4. Тщательно изучайте лицензионные соглашения на расширения, если таковых нет, уточняйте у автора.
  • 0
    Господа, прошу прощения, что не в тему, но уже несколько часов пытаюсь подружить Eclipse с ext-4.0.7-gpl
    Вот страничка на которой написано что и как делать. Здесь
    Но там показано что нужен com.spket.js_1.6.18.jar
    Если присмотреться, то текущая версия фреймворка копирует в папку с плагинами com.spket.js_1.6.20.jar
    Что делать? Или подскажите рабочий вариант, не нужен мне этот spket только бы работало.
    Спасибо.
    • –2
      Простите, но зачем вам эклипс?
      • +1
        Это моя рабочая среда, нравиться, поэтому стараюсь ничего другого не использовать, подскажите если не тяжело.
        • 0
          К сожалению, даже понятия не имею. Для разработки пользуюсь Notepad++/vim + Firebug + jslint.com, просто и надежно.
          • 0
            Notepad++/vim это конечно old school и всё такое, но мы ж в 21 веке как-никак.
            • 0
              А причем здесь 21-й век? :)
              Кстати, натыкался как-то на интересную статистику, согласно которой увлечение IDE вместо средств командной строки кореллирует с общим падением уровня разработчиков. Жаль, ссылку ту не сохранил.
        • +3
          Я тоже в своё время сидел в эклипсе. Потом пересел на WebStorm от JetBrains. И это было как после газели прокатиться на астон мартине. Как по мне так ничего лучше для web-разработки на данный момент не существует.
          • 0
            Хех, но WebStorm платный, а еклипс и плагин нет.
            Ну неужели никто не делал такое? Что-то не могу нарыть в гугле инфу, есть инструкции и так д, но почему то после проделанного всего не видит ExtJS и все.
            • 0
              Кхм… 35$ это как-то по-моему вообще смешно за действительно качественный продукт. К тому же что мне ещё очень нравится, так это оперативность, с которой они фиксят баги и реагируют на багреапорты.
              • 0
                Ну так мне учиться, а не работать.
                • +1
                  EAP бесплатные
    • 0
      Все, сделал, нужно было установить по дефалту фреймворк и я конфигурировал не из того файла.
      • 0
        С еклипсом то разобрался, но на смену пришел другой глюк
        Не могу подключить ExtJs к html, хотя делаю все так как на офф сайте.
        Start_ExtJs
        Подгружется чистый html, тоисть белая html-страничка соответственно.
        Кто сталкивался? Что я пропустил?
        Спасибо.
      • 0
        Странно как то — стандартная функция загрузилась,
        Ext.application({
        name: 'HelloExt',
        launch: function() {
        Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
        {
        title: 'Hello Ext',
        html : 'Hello! Welcome to Ext JS.'
        }
        ]
        });
        }
        });


        А беру любой другой пример кидаю код в js молчит, не грузит, может еще какие-то файлы нужно подключать кроме этих двух?
  • 0
    Не очень понял вот этот фрагмент (в чем была мысль автора)
    Примечание переводчика.
    Что бы добавить потомка как член класса, можно просто перенести его из конфига...


    Вы заменили lazy rendering панели на ее явную инициализацию, но непонятно, зачем. Раз мы говорим об ExtJS 4, то есть метод down(), который решит проблему получения ссылки на вложенный объект. itemId, если не ошибаюсь, тоже в этой ситуации поможет.
    К слову, в ExtJS 3 была замечательная штука под назывнием ref (жаль, что ее убрали).
    А вообще в идеале такие ссылки должны создаваться на уровне контроллера (с помощью секции refs) и код view должен быть максимально прост и не содержать логики внутренней синхронизации.
    • 0
      И таки да, чтобы добавить что-то как член класса, следует воспользоваться секцией statics в объявлении класса.
    • 0
      В ExtJS 4 в контроллерах можно использовать refs, о чем сказано в документации
      • 0
        Знаю, в комменте это тоже указано
    • 0
      Мысль была в том, что такие ссылки более логичны и прозрачнее выглядят. down очень похож на get. Стоит поменять потомка так, что параметр при вызове down() будет не верен и придётся править код.
      • 0
        Имхо это не повод отказываться от конфигурационных объектов и ленивой инициализации. Если так хочется видеть явное присваивание — привяжитесь к afterrender компонента. Но честно говоря вообще странно, что такая логика требуется прямо во view.
      • +1
        Если использовать в параметре к down нормальный селектор, а не "#id", то не придется. В этом как раз и главное отличие down от get. Естественно, это не касается ситуаций, когда вы меняете Grid на Form, например, и ищете по xtype. Хотя можно оборачивать наследника в панель с определенным xtype.
  • 0
    «Указывайте xtype такой же как имя вашего класса, включая пространство имён»

    К сожалению, с xtype разработчики ExtJS либо перемудрили, либо недодумали. Чтобы такой код работал:

    items: [{
        xtype: 'button',
        text: 'Standard Button'
    }, {
        xtype: 'App.widget.CustomButton',
        text: 'Custom button'
    }]

    класс должен быть объявлен так:

    Ext.define('App.widget.CustomButton', {
        extend: 'Ext.Button',
        alias: 'widget.App.widget.CustomButton' // а не 'App.widget.CustomButton'
    })

    Вместо того, чтобы превратить xtype в имя класса и согласовать его с механизмом динамической загрузки классов, сохранив возможность lazy instantiation, ребята из Sencha решили превратить xtype в шорткаты, разбитые с помощью префиксов на тематические группы: widget., proxy., reader. и т.д. Очень неудачное решение.
    • 0
      плохая идея использовать в xtype точки т.к. отваливаются селекторы для компонентов (query, up, down). Мы для своего проекта написали специальный пропроцессор который автоматически генерирует xtype для всех виджетов.

      Ext.Class.registerPreprocessor('default_xtype', function(cls, data) {
      var className = data.$className,
      re = new RegExp(/^project_name.view./),
      xtype;
      if (re.test(className) && !data.alias) {
      xtype = className.replace(re, '').replace(/\./g, '_').toLowerCase();
      data.xtype = cls.xtype = xtype;
      data.xtypes = [ xtype ];
      data.alias = [ 'widget.' + xtype ];
      }
      }, true);

      Ext.Class.defaultPreprocessors.push('default_xtype');


      (код расчитан на версию 4.0.7)
      • 0
        Прекрасное решение. Спасибо.
      • 0
        Один из плюсов ext, что можно делать такие вещи.
        Спасибо за фичу!
  • +1
    «Научитесь использовать FireBug»

    …и прикрутите к нему Illuminations for Developers: www.illuminations-for-developers.com/
  • 0
    Подскажите какую-нибудь литературу по ExtJS4, сайты, книги, форумы, с чего стоит начать изучение?
    Про офф. документацию знаю, пользуюсь. Хочется чего-нибудь еще
    • +1
      Очень туго с книгами и сайтами. Обещают книгу в 2012… Единственный пока верный способ — смотреть исходные коды готовых проектов. Ну не забывать про форум ext и стак оверфлоу

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.