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''