IDE и плагины для Ext JS 2.0

февраля 3, 2008

перевод статьи Jack Slocum’a:

API фреймвокра Ext JS 2.0 является очень обширным и запомнить все функции, свойства или конфиги практически невозможно. Хотя документация по API является очень подробной, но было бы здорово, если бы среды разработки имели автодополнение кода для JavaScript, как, например, для Java и C#. К счастью, есть несколько сред и плагинов к ним, которые это делают, а также имеют поддержку Ext 2.0.

Aptana Studio

Когда речь заходит о IDE для разрабоки на JavaScript, такую “штуку”, как Aptana Studio, безусловно, трудно не заметить. Я каждый день использую ей для разработки на Adobe AIR. Но автодополнение кода для Ext (версии 1.1) в Aptana практически устарело.

Маркус Шмидляйтнер (Markus Schmidleitner) создал плагин для Aptana для поддержки Ext JS 2.0. Чтобы установить выполните следующие шаги:

  • Скачайте и установите Aptana Studio.
  • Откройте Ваш каталог с установленой Aptana (у меня это “C:\Aptana”) и скопируйте .jar файл (скаченного плагина) в папку c плагинами.
  • Перезапустите Aptana.
  • Перейдите в окне настроек на Aptana -> Editors -> JavaScript -> Code Assist и выберите там “Ext 2.0″ (Вам, возможно, придется деактивировать поддержку Ext 1.1).

Aptana Studio c поддержкой синтаксиса Ext 2.0

Spket Eclipse Plugin & IDE


Spket IDE имеет превосходный помощник кода для Ext 2.0. Она использует Ext.jsb файл проекта и встроенный скрипт для построения помощника кода, включая варианты классов, унаследованных от базовых, а также имеет полную документацию.
Однако Spket IDE не имеет поддержки многих типов файлов (в том числе и CSS), поэтому я предпочитаю использовать Spket плагин для Eclipse в Aptana. Чтобы установить Spket плагин в Aptana:

  1. Скачайте и установите Aptana Studio (включая Eclipse).
  2. Запустите Aptana и перейдите в меню Help → Software Updates → Find and Install… → Search for new features to install → New remote site…
  3. В данном окне установите следующие опции:
    Name: “Spket”, Url: “ http://www.spket.com/update/ ”
  4. Перезапустите Aptana
  5. Посмотрите Spket IDE учебник, чтобы узнать как добавить поддержку Ext JS. Основые шаги установки:

    • Window → Preferences → Spket → JavaScript Profiles → New
    • Введите “ExtJS” и нажмите OK
    • Выберите “ExtJS” и нажмите “Add Library”, затем выберите “ExtJS” из выпадающего меню
    • Выберите "ExtJS" и нажмите кнопку "Add File", затем выберите "ext.jsb" файл в Вашей
      директории "./ext-2.x/source"
    • Установите новый ExtJS профиль как профиль по умолчанию, выбрав его нажав кнопку "Default" на правой стороне диалогового окна "JavaScript Profiles&qout;.
    • Перезапустите Aptana
    • Создайте новый файл JS типа Ext, редактируюя его Вы должно работать дополнение кода для Ext JS.

Поскольку Вы установили Spekt в качестве плагина к Aptana, может случиться, что Aptana всё равно будет использовать по умолчанию свой JS редактор, в таком случае кликните правой кнопкой мыши на файл и выбрать в контекстном меню Open with -> Spket JavaScript Editor.

Spket в Aptana с полной документации и ассистеном кода

Komodo Edit

Komodo Edit имеет поддержку для редактирования различных типов файлов, в том числе Perl, PHP, Python, Ruby, Tcl, JavaScript, CSS, HTML и XML. Этот редактор имеет версии для Windows, Mac OS X и Linux.

Чтобы установить Komodo с поддержкой Ext:

  1. Скачайте и установите Komodo Edit
  2. Скачайте API каталог.
  3. Go to Edit -> Preferences -> Code and select the “” button below the “API Catalog” section.
    Зайдите в меню Edit -> Preferences -> Code Intelligence и нажмите кнопку "Add an API catalog" в разделе "API Catalog".
  4. Select the ExtJS API catalog CIX file you downloaded above.
    Выберите CIX файл ExtJS API каталога(который Вы скачали на втором шаге).

Komodo c поддержкой Ext JS

Dreamweaver

Для тех, кто пользуется Dreamweaver, доступно два плагина SpketDW (для версий Dreamweaver MX 2004 и выше) и SpketDWCS (для версии Dreamweaver CS3).
Оба плагина сделаны одной и той же командой (Spket), и оба очень точные и тщательные.
В этих плагинах для Dreamweaver есть одна очень интересная особенность - это возможность выбора из выпадающего списка значения конфигурационной опции, соответствующему создаваемому объекту класса (можно увидеть на рисунке слева).

Помощь для конфигурационных опций
Помощь для конфигурационных опций

Поддержка членов класса

Чтобы скачать и установить, посетите их сайт.

Другие IDE

Также Ext поддерживается и другими IDE, например, IntelliJ и Visual Studio 2008.

Выводы

When working with Ext 2.0, there are quite a few tools available to help boost your productivity.
При разработке на Ext JS 2.0 существует не так уж и мало средств, чтобы повысить производительность Вашего труда, не забудьте о них.