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

Question

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

Я хочу создать расширение сетки и иметь возможность использовать экземпляр сетки с типом x.Насколько я знаю, я должен установить псевдоним 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

Некоторая помощь будет высоко оценена

Answer 1

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

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

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

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

Answer 3

Полагаю, вам нужно добавить xtype в вашу конфигурацию:

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

После более подробного изучения я бы ожидал, что псевдоним будет всем, что вам нужно.Вы определяете функцию initComponent?Ниже приведен пример из Сенча:

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

Answer 4

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

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

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

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

Answer 5

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

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

}