extjs4 - ExtJs 4…如何扩展Extjs 4组件？

Question

有人可以帮助我如何使用extjs版本4扩展extjs组件。我正在寻找相同的正确语法。请帮忙..!!

Answer 1

以下是在ExtJS 4中扩展文本字段的示例代码。

除了使用现有的配置和方法之外，此扩展组件还具有创建的新config属性以及与事件相关联的新方法。

组件的用途很简单，如果该值是强制性的，它将以红色显示标签，如果其值为readOnly则修改字段的背景色，并在聚焦时更改字段的背景色。

该代码已正确注释。希望能帮助到你。

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
}