extjs4 - docs - ExtJs 4… ¿Cómo extender componentes Extjs 4?

extjs docs

Question

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

Answer 1

¿Por qué no ver el src de los componentes de extjs4 como Grid, Table ...

y aquí están los documentos:

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

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

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

Answer 2

A continuación se muestra un código de ejemplo de campo de texto extendido en ExtJS 4.

Además de usar las configuraciones y métodos existentes, este componente extendido también tiene una nueva propiedad de configuración creada y un nuevo método creado y asociado con un evento.

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

El código está debidamente 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 3

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

Answer 4

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

ahora puedes usar xtype: ''mygrid''