Question

我已经习惯了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

一些帮助会很有意义

Answer 1

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

现在您可以使用 xtype：＆＃39; mygrid＆＃39;

Answer 2

问题可能是您尝试在调用Ext.define之后立即实例化使用新类的对象。请记住，Ext.define是一个异步过程。任何需要实例化组件的东西都应该在onReady处理程序中，或者在Ext.application（启动）中，或者在组件类中的initComponent中，或者在控制器类中的init中，因为这些位置只能在所有位置之后被调用。定义已完成。

指定以“widget”开头的别名。将允许您在任何需要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

如果您正在使用MVC应用程序，可以通过将视图信息添加到控制器来解决此问题。在您的控制器中，您需要在名为views的数组中指定视图。以下是一个示例：

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

在您的情况下，您可能需要定义views:['mygrid']。

如果您不使用MVC架构，则需要使用Ext.require并指定您的网格类存在。

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

Answer 5

这个也有效：

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

}

在ExtJS 4中创建带有xtype的扩展

5 个答案: