建立在ExtJS的一个的xtype延长4

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

一些帮助会。如果您使用的是一个MVC应用程序的工作有太大appretiated

Answer 1

，您可以通过添加视图的信息解决这个问题到你的控制器。在你的控制器，你需要指定一个名为views阵列中的观点。这里有一个例子：

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

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

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

Answer 2

我相信你需要一个的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 3

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

现在你可以为的xtype使用：“mygrid”

Answer 4

问题可能是您正在尝试实例化使用新的类的对象，紧跟在对Ext.define的调用之后。请记住，Ext.define是一个异步过程。任何需要实例化组件的东西都应该在onReady处理程序中，或者在Ext.application（launch）中，或者在组件类的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 5

这其中也适用：

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

}