javascript 在 ExtJS 4 中创建一个带有 xtype 的扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5944534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create an extension with an xtype in ExtJS 4
提问by klj
I am used to ExtJS 3.X, but am struggling with ExtJS 4.
我习惯了 ExtJS 3.X，但我在用 ExtJS 4 苦苦挣扎。
I want to create an extension of a grid and be able to use an instance of the grid with the xtype. As far as im aware, I have to set the alias as widget.xtypenamebut its not working for me.
我想创建一个网格的扩展，并且能够使用带有 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'
}]
})
The Error I am getting in Chrome console is Cannot create an instance of unrecognized alias: widget.mygrid
我在 Chrome 控制台中遇到的错误是 Cannot create an instance of unrecognized alias: widget.mygrid
Some help would be much appretiated
一些帮助会非常感谢
回答by Kunal
Ext.define('MyApp.Grid',{
extend: 'Ext.grid.GridPanel',
alias: 'widget.mygrid',
.......
.......
}
Now you can use as xtype:'mygrid'
现在你可以使用xtype:'mygrid'
回答by Bill
The problem may be that you are attempting to instantiate an object that uses your new class, immediately following the call to Ext.define. Remember that Ext.define is an asynchronous process. Anything that needs to instantiate components should be in an onReady handler, or in Ext.application (launch), or in initComponent in a component class, or in init in a controller class, for these locations are guaranteed to be called only after all the defines have completed.
问题可能在于您试图在调用 Ext.define 之后立即实例化一个使用新类的对象。请记住，Ext.define 是一个异步过程。任何需要实例化组件的东西都应该在 onReady 处理程序中，或者在 Ext.application（启动）中，或者在组件类中的 initComponent 中，或者在控制器类中的 init 中，因为这些位置保证只有在所有定义完成。
Specifying an alias beginning with "widget." will allow you to use it wherever xtype is expected. In your simple example, you might try doing the following:
指定以“小部件”开头的别名。将允许您在需要 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'
}]
});
});
This will instantiate your window within the callback after the define completes.
这将在定义完成后在回调中实例化您的窗口。
回答by Abdel Raoof
If you are using working on a MVC application, you can fix this by adding the view information to your controller. In your controller you need to specify the view in an array named views.. Here is an example:
如果您正在使用 MVC 应用程序，则可以通过将视图信息添加到控制器来解决此问题。在您的控制器中，您需要在名为views.的数组中指定视图。这是一个示例：
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
views: ['users.List'],
...
In your case you may need to define views:['mygrid'].
在您的情况下，您可能需要定义views:['mygrid'].
If you are not using MVC architecture, you will need to use the Ext.requireand specify your grid class exists.
如果您不使用 MVC 架构，您将需要使用Ext.require并指定您的网格类存在。
回答by Tom Hartwell
I believe you need to add a xtype to your config:
我相信您需要在配置中添加一个 xtype：
var MyGrid = Ext.define('mygrid', {
extend:'Ext.grid.Panel',
alias: 'widget.mygrid',
xtype: 'mygrid',
// rest of grid...
});
After researching more, I would expect the alias to be all you need. Are you defining an initComponent function? Below is an example from Sencha:
在研究了更多之后，我希望别名就是你所需要的。你在定义一个 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);
}
});
回答by emolaus
This one also works:
这个也有效：
Ext.define('Path.to.ClassUsingSubcomponent', {
...
requires: ['Path.to.YourSubcomponent'],
...
}
