Создайте расширение с xtype в ExtJS 4

Я привык к ExtJS 3.X, но борюсь с ExtJS 4.

Я хочу создать расширение сетки и иметь возможность использовать экземпляр сетки с xtype. Насколько мне известно, я должен установить псевдоним как widget.xtypename, но он не работает для меня.

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'
    }]
})

Ошибка, которую я получаю в консоли Chrome, - Cannot create an instance of unrecognized alias: widget.mygrid

Некоторая помощь будет значительно улучшена

Ответ 1

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

Теперь вы можете использовать как xtype: 'mygrid'

Ответ 2

Проблема может заключаться в том, что вы пытаетесь создать экземпляр объекта, который использует ваш новый класс, сразу после вызова Ext.define. Помните, что Ext.define - это асинхронный процесс. Все, что требуется для создания компонентов, должно быть в обработчике onReady или в Ext.application(запуск) или в initComponent в классе компонента или в init в классе контроллера, поскольку эти местоположения гарантированно будут вызываться только после того, как все Определения завершены.

Указание псевдонима, начинающегося с "виджета". позволит вам использовать его везде, где ожидается xtype. В вашем простом примере вы можете попробовать сделать следующее:

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

Это приведет к созданию вашего окна в обратном вызове после завершения определения.

Ответ 3

Если вы работаете с приложением MVC, вы можете исправить это, добавив информацию о просмотре в ваш контроллер. В вашем контроллере вам нужно указать представление в массиве с именем views. Вот пример:

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

В вашем случае вам может понадобиться определить views:['mygrid'].

Если вы не используете MVC-архитектуру, вам нужно будет использовать Ext.require и указать свой класс grid.

Ответ 4

Я считаю, что вам нужно добавить xtype в свой конфиг:

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

После изучения большего, я ожидал бы, что псевдоним будет всем, в чем Вы нуждаетесь. Вы определяете функцию initComponent? Ниже приведен пример из 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 components
    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);
    }
});

Ответ 5

Это также работает:

Ext.define('Path.to.ClassUsingSubcomponent', {
...
requires: ['Path.to.YourSubcomponent'],
...

}