Change value of component in DataItem when using dataMap

[ynhat]

I have Ext.Img component in DataItem. After getting url value from server, I want to add url of Sencha.io to it. Then, I set it as Img component src.

Url value from server:
images/someimage.jpg

New url:
http://src.sencha.io/60/60/http://my.../someimage.jpg

Here is my code. It always gets the old value from server. Do anyone know the reason?
Btw, is there any better approach for this?

Ext.define('ABC.view.HotDealItem', {
    extend : 'Ext.dataview.component.DataItem',
    xtype : 'hotdealitem',
    requires : ['Ext.Img'],


    config : {
        dataMap : {
            getImage : {
                setSrc : 'image'
            }
        },


        image : {
            docked : 'left',
            xtype : 'image',
            cls : 'image'
        },


        layout : {
            type : 'vbox'
        }
    },


    applyImage : function(config) {
        return Ext.factory(config, Ext.Img, this.getImage());
    },
    updateImage : function(newImage, oldImage) {
        if(oldImage) {
            this.remove(oldImage);
        }


        if(newImage) {
            this.add(newImage);
        }
    },
    updateRecord : function(newRecord) {
        this.callParent(arguments);


        if(!newRecord) {
            return;
        }


        var image = this.getImage();
        image.setSrc('http://src.sencha.io/60/60/http://mydomain.com/' + newRecord.get('image'));
    }
});

[mitchellsimoens]

Why not use the convert config in the field in the model? Change the URL up front.

[ynhat]

Thanks Mitchell.

I follow your suggestion, and it works now. I upload my code below. Maybe, it will be helpful for someone.

In the model, I still want to keep "image" field. Therefore, I create a new field named "image-s".

Ext.define('ABC.model.HotDeal', {
    extend : 'Ext.data.Model',
    requires : 'ABC.proxy.HotDeal',


    config : {
        fields : [
            {
                name : "image",
                type : "string"
            }, 
            {
                name : "image-s",
                type : "string",
                convert : function(v, record) {
                    return 'http://src.sencha.io/60/60/http:/mydomain.com/' + record.data.image;
                }
            }
        ],


        proxy : {
            type : 'hotdeal'
        }
    }
});

References:
http://docs.sencha.com/touch/2-0/#!/...ld-cfg-convert

[towerhe]

I think that updateRecord is the right place to format the values for the dataitem. The representation of the data is a view logic, we should not do it in the domain models.

[interfasys]

The updateRecord "way" works fine, especially after having removed the deprecated datamap config element.

[=NR=]

Why not use the convert config in the field in the model? Change the URL up front.

i don't see this config in the documentation, am i missing something here?
where can i find reference (what it used for, and bla bla) for this config property?

[mitchellsimoens]

The fields config setup the Ext.data.Field: http://docs.sencha.com/touch/2.2.0/#...ld-cfg-convert

[=NR=]

The fields config setup the Ext.data.Field: http://docs.sencha.com/touch/2.2.0/#...ld-cfg-convert

thanks mitchell