ExtJs 4 ... ¿Cómo extender los componentes de Extjs 4?

Question

alguien me puede ayudar con la forma de extender los componentes extjs utilizando extjs versión 4. Estoy buscando una sintaxis adecuada para el mismo. por favor ayuda..!!

Answer 1

por qué no ver en la Colección de los componentes del extjs4, tales como GRID, Mesa ...

y aquí están docs:

http://docs.sencha.com/ext-js/4-0/#/guide/components < == importante

http://docs.sencha.com/ext-js/4-0/#/guide/class_system

Ext.define('My.custom.Component', { 
    extend: 'Ext.Component' 
}); 

Answer 2

Ext.define('myApp.Grid', { 
     extend: 'Ext.Grid', 
     alias: 'widget.mygrid' 
     .... 
     .... 
     } 

ahora puedes usar xtype: 'myg deshacerse'

Answer 3

siguiente es un ejemplo de código de campo de texto se extiende en ExtJS 4.

Otros a continuación, utilizando las configuraciones y los métodos existentes, este componente extendido también tiene una nueva propiedad config creado y un nuevo método creado & asociado con una evento.

El propósito del componente es simple que muestra la etiqueta en color rojo si el valor es obligatorio, modifica el color de fondo del campo si solo es read y también cambia el color de fondo del campo cuando está enfocado.

El código está correctamente comentado. Espero eso ayude.

Ext.define('Ext.pnc.Textfield', { 

extend: 'Ext.form.field.Text',//Extending the TextField 

alias: 'widget.pnctextfield',//Defining the xtype 

config:{ 
    focusCls:'focusClassFieldPnC',//Providing value for existing config property. 
    testConfig:'testConfigValue'//Creating a new config. Accessor functions will be created for this one by ExtJS engine 
}, 

constructor:function(cnfg){ 
    this.callParent(arguments);//Calling the parent class constructor 
    this.initConfig(cnfg);//Initializing the component 
    this.on('beforerender',this.beforeRender);//Associating a new defined method with an event 
}, 

//Defining a method below and associating this with an event in the constructor above 
beforeRender:function(){ 

    if(!this.allowBlank){ 
     this.labelStyle = 'color:#FF0000';   
    } 

    if(this.readOnly){ 
     this.fieldCls = 'readOnlyClass'; 
    } 
}, 

//Over-riding a function which already exists in parent class. Note that this has not been associated with any event in constructor as it already defined in parent class 
afterRender:function(){ 
    console.log('after render function'); 
    this.callParent();//Calling the parent class method. This can be omitted if not  required and is not a must 
} 
}); 

.readOnlyClass{ 
background:#FF0000 !important 
} 


.focusClassFieldPnC{ 
background:#00ff00 !important 
} 

Answer 4

Ext.define('BS.view.MyGrid' , { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.my-grid', 

    // Non-complex config types (booleans, integers, strings) go here 
    width: 1000, 
    autoHeight: true 

    initComponent: function() { 
     Ext.apply(this, { 
      // complex configs (objects/arrays) go here 
      columns: colModel, 
     }); 

     this.callParent(arguments); 
    } 
});