13

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

一些帮助将不胜感激

4

5 回答 5

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

现在您可以用作xtype:'mygrid'

于 2011-06-21T05:56:43.513 回答
6

问题可能是您试图实例化一个使用您的新类的对象，紧接着调用 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'
        }]
    });
});

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

于 2011-06-30T08:12:02.533 回答
4

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

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

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

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

于 2011-05-10T08:55:11.710 回答
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);
    }
});
于 2011-06-16T16:45:22.757 回答
1

这也有效：

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

}
于 2013-01-28T11:05:24.833 回答