How to check whether xtype object exists or not in extjs4.1

Question

I am getting an object using Ext.component.Query. I need to check whether the object exists or not. If object exists, I need to remove the object. Can anybody tell me how to do this?

Thanks

Answer 1

As other posters have mentioned, the method you're looking for is Ext.ComponentQuery, which returns an array which you can then check the length of via length, which will in turn tell you if the object exists or not. If the object exists, it can be destroyed via the destroy() method of the Ext.AbstractComponent

I have made a jsFiddle example demonstrating what you're trying to do here: http://jsfiddle.net/mPYPw/

Code from the fiddle:

Ext.create('Ext.panel.Panel', {
    name : 'myPanel',
    title: 'Panel 1',
    width: 200,
    html: '<b>Its a panel!</b>',
    renderTo: Ext.getBody()
});

Ext.create('Ext.panel.Panel', {
    name : 'myPanel',
    title: 'Panel 2',
    width: 200,
    html: 'Look, another panel!',
    renderTo: Ext.getBody(),
    dockedItems: [{
    xtype: 'toolbar',
    dock : 'bottom',
    items: [{
        text: 'Destroy all panels!',
        handler: function(){
            // Here we can query for the panels
            var panels = Ext.ComponentQuery.query('panel[name=myPanel]'),
                 trees = Ext.ComponentQuery.query('treepanel');

            // @param {Ext.panel.Panel[]} panels Array of panel components
            if(panels.length > 0){
                alert("About to destroy " + panels.length + " Panels!");
                Ext.each(panels, function(panel){
                    panel.destroy();
                });
            }

            // There are no tree panels
            if(!trees.length){
                alert("There are no tree panels to destroy!");
            }
        }
    }]
    }]
});

Answer 2

Simple check with Ext.ComponentQuery

var check = Ext.ComponentQuery.query('yourXtype');
if (check.length > 0)
    //do something
else
    //do other something

Answer 3

I know the documentation was messed up on one of the versions... I don't know if it is still the same in Ext JS 4.2, but in 4.1.1 you can query for Ext JS objects by xtype using something similar to this:

Ext.ComponentQuery.query('xtype');

i.e.

Ext.ComponentQuery.query('gridpanel');

Answer 4

I think Ext.ComponentQuery-method-query explains it.

Answer 5

FIRST NOTE THAT Ext.getCmp("id") is suitable for small Apps.. If u tend to hav a big app u could go for a Component Query . This can be done in two ways Either u could use a "Xtype" or "component Id"(note component id must be prefixed with a #).