Create an extension with an xtype in ExtJS 4

Question

I am used to ExtJS 3.X, but am struggling with ExtJS 4.

I want to create an extension of a grid and be able to use an instance of the grid with the xtype. As far as im aware, I have to set the alias as widget.xtypename but its not working for me.

var MyGrid = Ext.define('mygrid', {
    extend:'Ext.grid.Panel',
    alias: 'widget.mygrid',
    // rest of grid...
});

Ext.create('Ext.window.Window', {
    title:'My Window',
    items:[{
        xtype:'mygrid'
    }]
})

The Error I am getting in Chrome console is Cannot create an instance of unrecognized alias: widget.mygrid

Some help would be much appretiated

Answer 1

 Ext.define('MyApp.Grid',{
            extend: 'Ext.grid.GridPanel',
            alias: 'widget.mygrid',
            .......
            .......
            }

Now you can use as xtype:'mygrid'

Answer 2

The problem may be that you are attempting to instantiate an object that uses your new class, immediately following the call to Ext.define. Remember that Ext.define is an asynchronous process. Anything that needs to instantiate components should be in an onReady handler, or in Ext.application (launch), or in initComponent in a component class, or in init in a controller class, for these locations are guaranteed to be called only after all the defines have completed.

Specifying an alias beginning with "widget." will allow you to use it wherever xtype is expected. In your simple example, you might try doing the following:

var MyGrid = Ext.define('mygrid', {
    extend:'Ext.grid.Panel',
    alias: 'widget.mygrid',
    // rest of grid...
}, function() {
    Ext.create('Ext.window.Window', {
        title:'My Window',
        items:[{
            xtype:'mygrid'
        }]
    });
});

This will instantiate your window within the callback after the define completes.

Answer 3

If you are using working on a MVC application, you can fix this by adding the view information to your controller. In your controller you need to specify the view in an array named views.. Here is an example:

 Ext.define('MyApp.controller.Users', {
    extend: 'Ext.app.Controller',
    views: ['users.List'],
    ...

In your case you may need to define views:['mygrid'].

If you are not using MVC architecture, you will need to use the Ext.require and specify your grid class exists.