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

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:'mygrid'

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并指定您的网格类是否存在。