javascript - sencha - extjs docs

Crea una extensión con un xtype en ExtJS 4

Question

Estoy acostumbrado a ExtJS 3.X, pero estoy luchando con ExtJS 4.

Quiero crear una extensión de una grilla y poder usar una instancia de la grilla con el xtype. Por lo que yo sé, tengo que establecer el alias como widget.xtypename pero no funciona para mí.

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''
    }]
})

El error que Cannot create an instance of unrecognized alias: widget.mygrid en la consola de Chrome es Cannot create an instance of unrecognized alias: widget.mygrid se Cannot create an instance of unrecognized alias: widget.mygrid

Alguna ayuda sería muy apreciada

Answer 1

Si está trabajando en una aplicación MVC, puede solucionarlo agregando la información de la vista a su controlador. En su controlador necesita especificar la vista en una matriz llamada views . Aquí hay un ejemplo:

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

En su caso, es posible que necesite definir views:[''mygrid''] .

Si no está utilizando la arquitectura MVC, deberá usar Ext.require y especificar que su clase de grid existe.

Answer 2

Creo que necesitas agregar un xtype a tu configuración:

var MyGrid = Ext.define(''mygrid'', {
    extend:''Ext.grid.Panel'',
    alias: ''widget.mygrid'',
    xtype: ''mygrid'',
    // rest of grid...
});

Después de investigar más, esperaría que el alias sea todo lo que necesita. ¿Estás definiendo una función initComponent? A continuación se muestra un ejemplo de 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);
    }
});

Answer 3

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

Ahora puedes usar como xtype: ''mygrid''

Answer 4

El problema puede ser que está intentando crear una instancia de un objeto que usa su nueva clase, inmediatamente después de llamar a Ext.define. Recuerde que Ext.define es un proceso asincrónico. Todo lo que necesite crear instancias de componentes debe estar en un controlador onReady, o en Ext.application (launch), o en initComponent en una clase de componente, o en init en una clase de controlador, ya que se garantiza que estas ubicaciones serán llamadas solo después de que define ha completado.

Especificando un alias que comience con "widget". le permitirá usarlo donde sea que se espere xtype. En tu ejemplo simple, puedes intentar hacer lo siguiente:

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''
        }]
    });
});

Esto instanciará su ventana dentro de la devolución de llamada una vez que se complete la definición.

Answer 5

Este también funciona:

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

}