How to Navigate through Ext-JS Code?

I'm having a tough time learning Javascript/Ext-JS. I setup the Spket plug-in for some Code Completion in Eclipse, but like for instance, if I see a piece of code like this....

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

Spket highlights the .get red so I can't code complete further then the get(). Aside from trying to look for showBannerId (which I found was a table... it had the layout:'table' member). Where in Ext-JS API could I of found that this Ext-JS member had a method called 'add'?

**Side Note of why I am looking at this piece of code:

Essent开发者_如何转开发ially I need to make sure this showBannerId doesn't continually add these displayFields. The id bannerField should be checked to see:

-If it exists (which I just figured out) Ext.get('bannerField'); and

-If it exists then it should only edit the displayField... not recreate it. How can I edit its attributes (researching xtype displayfield's setValue method)?

Hopefully this makes sense... let me know if I wasn't clear.

---

Resources

The ExtJS Documentation and Examples Should be your number one source of information regarding ExtJS.

Discovering methods / objects

In your particular case, how would you know that the element in question had an add method? You would basically have to look at the functions that you are calling in the documentation, and what they are expected to return. For example, you call Ext.ComponentMgr.get. In the documentation, this returns an Ext.Component. Worth noting, however, is that there are many ExtJS objects that inherit from Ext.Component (in fact, most objects inherit from it!).

Programmatically, you can determine the actual type of an Ext.Component by calling getXType, or isXType(type) to check that something is a certain type of component (The Ext.Component documentation has a list of xtypes and their corresponding classes). Based on what you've written though, if you want to know what kind of a component you have, you might be better off looking through your source code for the id in question (i.e. showBannerId), and seeing how it is declared, or what object it is declared as a part of.

Your specific question

If you want to...

• Check if a field exists; and
• Edit it, if it does

The following code will be of help to you:

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
    });
}

Note that I use Ext.getCmp (which gets an Ext.component) as opposed to Ext.get (which gets an Ext.Element; essentially, a wrapper for a DOM object).

Tools

If you are looking for good tools for working with ExtJS, I'd recommend taking a look at Illumination, a firebug extension that allows you to peek into ExtJS objects more easily than looking at raw javascript objects. If you're looking for good IDE support for javascript and ExtJS... that's a whole other question! Support for javascript in IDE's is generally not great.