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

Create an extension with an xtype in ExtJS 4

本文关键字：xtype 扩展 创建 ExtJS      更新时间：2023-09-26

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

一些帮助会得到很多赞赏

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

现在你可以使用 xtype：'mygrid'

问题可能是您尝试实例化使用新类的对象，紧跟在调用 Ext.dedefine 之后。 请记住，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'
        }]
    });
});

这将在定义完成后在回调中实例化窗口。

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

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

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

如果不使用 MVC 体系结构，则需要使用 Ext.require 并指定网格类存在。

我相信你需要在你的配置中添加一个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);
    }
});

这个也有效：

Ext.define('Path.to.ClassUsingSubcomponent', {
...
requires: ['Path.to.YourSubcomponent'],
...
}
相关文章：