Crear 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 red y ser capaz de utilizar una instancia de la cuadrícula con el xtype. Por lo que yo sé, tengo que configurar 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 estoy recibiendo en la consola de Chrome es Cannot create an instance of unrecognized alias: widget.mygrid

Algunos ayuda sería muy appretiated

Answer 1

Si está utilizando trabajando en una aplicación MVC, puede solucionar este problema mediante la adición de la información vista a su controlador. En su controlador es necesario especificar la vista en una matriz denominada views .. Aquí está un ejemplo:

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

en su caso, puede que tenga que definir views:['mygrid'].

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

Answer 2

creo que es necesario agregar un xtype a su 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 de ser 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 puede utilizar como xtype: 'mygrid'

Answer 4

El problema puede ser que está intentando crear una instancia de un objeto que utiliza la nueva clase , inmediatamente después de la llamada 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.

Especificación de un alias que comience por "widget". le permitirá usarlo donde sea que se espere xtype. En el sencillo ejemplo, es posible que trate de 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 creará una instancia de la ventana dentro de la devolución de llamada después de completarse definir.

Answer 5

Este también funciona:

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

}