PDA

View Full Version : How to convert Ext JS 3 based ImageField to Ext JS 4



naveedanjum
9 Dec 2011, 4:00 AM
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
9 Dec 2011, 8:56 AM
Use Ext.define and give it an alias property.

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

naveedanjum
11 Dec 2011, 8:25 PM
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
11 Dec 2011, 11:49 PM
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);