Ext.getCmp is not working in ExtJS4

Question

I am trying to create a component and access it inside controller. But while accessing the component by id, it is not returning the component. It always returns undefined. Please find below the code.

enter code here

//Component creation in view layer as below

Ext.define('MyApp.view.performance.grid.IFrameGridCmp', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.crMainPanel',
    id:'mainPanelId',
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    border:0,
    resizable: false,
    forceFit: true,
    autoWidth: true,
    initComponent: function() {
        Ext.apply(this, {
            items: [
                {
                    xtype:'panel',
                    flex:.02,
                    border:0
                },
                {
                    xtype:'crHeaderPanel',
                    flex:.05
                },
                {
                    xtype: 'crUpperPanel',
                    flex: 0.93
                },
                Ext.create('Ext.Component', {
                    autoEl: {
                        tag: 'iframe', 
                        cls: 'x-hidden', 
                        src: Ext.SSL_SECURE_URL
                    },
                    id:'FileDownloader',
                    height:0,
                    listeners: {
                        afterrender: function () {
                            this.getEl().on('load', function () {
                                console.log('loaded download frame');
                            });
                        }
                    },
                    load: function(config){
                        var e = this.getEl();
                        e.dom.src = config.url + (config.params ? '?' + Ext.urlEncode(config.params) : '');
                        e.dom.onload = function() {
                            Ext.getBody().unmask();
                            if(e.dom.contentDocument.body.childNodes[0].wholeText == '404') {
                                Ext.Msg.show({
                                    title: 'Attachment missing',
                                    msg: 'The document you are after can not be found on the server.',
                                    buttons: Ext.Msg.OK,
                                    icon: Ext.MessageBox.ERROR 
                                });
                            }
                        };
                    }
                })
            ]
        });
        this.callParent(arguments);
    }
});

========================================

    enter code here

//Accessing the controller as below in controller

views: ['performance.grid.IFrameGridCmp'],

//The below line gives error
var downloader = Ext.getCmp('FileDownloader');
            downloader.load({
                url: '/APXUI/data/json/xls?exportData='+Ext.JSON.encode(records)
            });

sra sra · Accepted Answer · 2012-12-11T21:44:09

Well, the view is not created at the time you are calling Ext.getCmp()

Note that views: ['performance.grid.IFrameGridCmp'], is only a sort of binding that view to the controller, which means the controller will create a getter for you, nothing more. You still need to instantiate the view by calling .create(); or Ext.widget('crMainPanel')

Ext.getCmp is not working in ExtJS4

2 Answers