How to convert Ext JS 3 based ImageField to Ext JS 4

[naveedanjum]

Ext.form.ImageField = Ext.extend(Ext.form.Field, {
autoCreate: {tag: 'img'}
,setValue: function(new_value){
if (new_value == undefined || new_value == null) {
this.el.dom.src = '/images/no_image.png';
} else {
this.el.dom.src = '/images/thumbnail/' + new_value;
}
}
,initValue : function(){
this.setValue(this.value);
}
,initComponent: function() {
Ext.apply(this, {
});
Ext.form.ImageField.superclass.initComponent.apply(this);
}
});
Ext.reg('image_field', Ext.form.ImageField);

Any Idea?? whats alternative in Ext JS 4

[tvanzoelen]

Use Ext.define and give it an alias property.

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

[naveedanjum]

Hello there, I converted this to Ext JS 4 notation but i am getting a.getItemId is not a function on following code.



Ext.define('sample.ui.ImageField',{
extend : 'Ext.form.field.Field',
alias : 'widget.imageField',

autoCreate: {tag: 'img'},

constructor:function(config)
{
return this.callParent(arguments);
},

initComponent:function()
{
sample.ui.ImageField.superclass.initComponent.apply( this, arguments );
},

onRender:function()
{
sample.ui.ImageField.superclass.onRender.apply( this, arguments );
},

setValue: function(new_value){
if (new_value == undefined || new_value == null) {
this.el.dom.src = '/images/no_image.png';
} else {
this.el.dom.src = '/images/thumbnail/' + new_value;
}
},

initValue : function(){
this.setValue(this.value);
}

});

[tobiu]

you really need to get familiar with the basics of the new ext 4 syntax.

do you know what this.callParent(arguments); is meant for?

you can remove your constructor method completely.



return this.callParent(arguments);


makes no sense and can cause an error.

inside your other methods like initComponent:


sample.ui.ImageField.superclass.initComponent.apply( this, arguments );


can get replaced with:


this.callParent(arguments);