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

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

• javascript
• extjs
• extjs4

• I know it may not seem relevant, but could you add the rest of your grid code? I've had interesting problems with constructor functions when calling the callParent() function when extending classes, for example, and I'd want to rule that sort of thing out. – Daniel Attfield Commented Jun 17, 2011 at 15:54

5 Answers 5

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

Now you can use as xtype:'mygrid'

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 ponents should be in an onReady handler, or in Ext.application (launch), or in initComponent in a ponent class, or in init in a controller class, for these locations are guaranteed to be called only after all the defines have pleted.

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 pletes.

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.

I believe you need to add a xtype to your config:

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

After researching more, I would expect the alias to be all you need. Are you defining an initComponent function? Below is an example from Sencha:

Ext.define('App.BookGrid', {
    extend: 'Ext.grid.Panel',
    // This will associate an string representation of a class
    // (called an xtype) with the Component Manager
    // It allows you to support lazy instantiation of your ponents
    alias: 'widget.bookgrid',

    // override
    initComponent : function() {
        // Pass in a column model definition
        // Note that the DetailPageURL was defined in the record definition but is not used
        // here. That is okay.
        this.columns = [
            {text: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {text: "Title", flex: 1, dataIndex: 'Title', sortable: true},
            {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ];
        // Note the use of a storeId, this will register thisStore
        // with the StoreManager and allow us to retrieve it very easily.
        this.store = new App.BookStore({
            storeId: 'gridBookStore',
            url: 'sheldon.xml'
        });
        // finally call the superclasses implementation
        App.BookGrid.superclass.initComponent.call(this);
    }
});

This one also works:

Ext.define('Path.to.ClassUsingSubponent', {
...
requires: ['Path.to.YourSubponent'],
...

}