Как перемещаться по коду Ext-JS?

Question

Мне тяжело изучать Javascript / Ext-JS. Я устанавливаю плагин Spket для дополнения кода в Eclipse, но, например, если я вижу фрагмент кода, подобный этому ...

Ext.ComponentMgr.get('communicationName').findById('showBannerId').add(
{
     xtype : 'displayfield',
     id : 'bannerField',
     value : banners,
     autoHeight : true,
     width : 1000
});

Spket выделяет .get красным, поэтому я не могу выполнить код дальше, чем get (). Помимо попыток поиска showBannerId (который я обнаружил, был таблицей ... у него был макет: элемент 'table') Где в Ext-JS API я мог обнаружить, что у этого члена Ext-JS есть метод add?

** Примечание о том, почему я смотрю на этот кусок кода:

По сути, мне нужно убедиться, что этот showBannerId не добавляет эти поля отображения постоянно. Идентификатор bannerField должен быть проверен, чтобы увидеть:

-Если он существует (, который я только что выяснил ) Ext.get ('bannerField'); и

-Если он существует, он должен только отредактировать displayField ... не создавать его заново. Как мне отредактировать его атрибуты ( исследование метода setValue поля отображения xtype) ?

Надеюсь, это имеет смысл ... дайте мне знать, если я не был ясен.

Answer 1

Ресурсы

Документация ExtJS и Примеры Должен быть вашим первым источником информации о ExtJS.

Обнаружение методов / объектов

В вашем конкретном случае, как вы узнали, что у рассматриваемого элемента был метод add? В основном вам придется посмотреть на функции, которые вы вызываете в документации, и на то, что они должны возвращать. Например, вы звоните Ext.ComponentMgr.get. В документации это возвращает Ext.Component. Однако стоит отметить, что существует множество объектов ExtJS, которые наследуются от Ext.Component (на самом деле большинство объектов наследуют от него!).

Программно, вы можете определить фактический тип Ext.Component, вызвав getXType или isXType(type), чтобы проверить, что что-то является компонентом определенного типа (документация Ext.Component содержит список xtypes и их соответствующих классов). Однако, основываясь на том, что вы написали, если вы хотите знать, какой у вас компонент, вам, возможно, будет лучше просмотреть исходный код для рассматриваемого идентификатора (то есть showBannerId) и посмотреть, как он объявлен. или какой объект объявлен как часть.

Ваш конкретный вопрос

Если вы хотите ...

• Проверить, существует ли поле; и
• Отредактируйте его, если оно есть

Вам поможет следующий код:

var elem = Ext.getCmp("bannerField") //Shorthand for Ext.ComponentMgr.get
//check if a field exists:
if(!Ext.isEmpty(elem)) {

    //make sure it is the right type
    if(elem.isXType('displayfield')) {
        elem.setValue(banners) //since we know this is an Ext.form.DisplayField component
    }

} else {
    //element does not exist, so add it
    Ext.ComponentMgr.get('communicationName').findById('showBannerId').add({
        xtype : 'displayfield',
        id : 'bannerField',
        value : banners,
        autoHeight : true,
        width : 1000
    });
}

Обратите внимание, что я использую Ext.getCmp (который получает Ext.component), а не Ext.get (который получает Ext.Element; по сути, оболочку для объекта DOM).

Инструменты

Если вы ищете хорошие инструменты для работы с ExtJS, я бы порекомендовал взглянуть на Illumination , расширение firebug, которое позволяет вам смотреть на объекты ExtJS проще, чем на необработанные объекты javascript. , Если вы ищете хорошую поддержку IDE для javascript и ExtJS ... это совсем другой вопрос! Поддержка javascript в IDE обычно невелика.