Create DataItem in Dataview Sencha Touch 2

[hjeDK]

looking throught the documentation I came across a comment to the dataMap config of Ext.dataview.component.DataItem. Here he uses an XTemplate that could do the trick, which seems to be an elegant way of doing it. However with a seemingly direct copy of his code into mine I get the error I describe there.
The XTemplate way would be a preferred one for me - if it's possible.
As I'm using a Label I have config.html instead of config.label in the apply function.

[EDIT]
I managed to get it working using a Template in the applyfunction and nothing in my dataMap. the result looks like this:

    applyEventData: function(config) {
        var tmpl = new Ext.Template('{event_date} - {event_time}: {typename} {value}');
        config.html = tmpl.apply(this.getRecord().data);
        return Ext.factory(config, Ext.Label, this.getEventData());
    },

        
dataMap: {            getEventData: {


            }
        },

This works like a charm

[chrigu]

@ hjeDK: Thank you, that was exactly what I was looking for.. and I spent quite some time now!

[SebasSP]

The XTemplate solution works well for displaying data when the view is initialized, but when records change the view will not update.

[bluehipy]

Maybe you don't handle well the record updates?

[SebasSP]

I now use custom setters like you described to update the data used for the tpl and it works well.

[=NR=]

Objects passed in data item definition don 't has to be simple elements with a simple setter attached, on the pattern specified by you:

config: { 
dataMap: { 
getName: { 
setHtml: 'name' 
} 
}, 
name: { 
cls: 'x-name', 
flex: 1 
}
}

If you look in the dataitem source code you see how mapping works:

for (componentName in dataMap) { 
setterMap = dataMap[componentName]; 
component = me[componentName](); 
if (component) { 
for (setterName in setterMap) { 
if (component[setterName]) { 
component[setterName](data[setterMap[setterName]]); 
} } } }

So instead of using setHtml method of a Component one could create a new component with setters for every property he needs.

Ext.define('MyProduct',{
extend:'Ext.Contaier',
xtype:'mycomponenttype',
config:{
name:null,
image:null,
quantity:null,
items:[
{xtype:'component', id:'name'},
{xtype:'component', id:'image'}
{xtype:'component', id:'quantity'}
]
},
setName:function(name)
{ 
//update view element
},
setImage:function(image)
{
//update image element
},
setQuantity:function(image)
{
//update quantity
}
});

Now you have a new type that has setters for your needs, mycomponenttype, that could have any layout or tpl you want.


Now in you data item implementation you can set things like:

config: { 
dataMap: { 
getMyComp: { 
setName: 'name',
setImage:'image',
setQuantity:'quantity'
} 
}, 
myComp: { 
xtype:'mycomponenttype'
}


}
,
applyMyComp: function(config){
return Ext.factory(config, MyProduct , this.getMyComp());
}

Of course this is not a working code, but I hope you get the idea


If you don t have a large number of items, using a container instead of Dataview might be more handy.

hmm..,

why is it with this concept when i tried to setHtml of my component item it says the item is null and there is no such method as setHtml ?

i did put custom config with the name of ids from my items

[bluehipy]

Show us the code, to see how you did it.

[=NR=]

Show us the code, to see how you did it.

hi bluehipy,

thanks for the reply,

this is the end result that i want to achieve,
dataitem layout.png

here is my custom dataitem:

Ext.define('newapp.custom.DIThumbnail', {
    extend: 'Ext.dataview.component.DataItem'
    , xtype: 'dithumbnail'


    , require: [
        'Ext.Img'
        , 'newapp.custom.DIThumbnailDetails'
    ]


    , config: {
        cls: 'dithumbnail'
        , layout: 'hbox'
        , image: {
            cls: 'dithumbnail_image'
        }
        , details: {
            cls: 'dithumbnail_details'
        }
        , dataMap: {
            getImage: {
                setSrc: 'image' //setSrc of Ext.Img
            }
            , getDetails: {
                setThumbnailTitle: 'title'
                , setThumbnailButton: 'unit'
                , setText1: 'priceLow'
                , setText2: 'priceHigh'
            }
        }
    }


    , applyImage: function (config) {
        return Ext.factory(config, Ext.Img, this.getImage());
    }
    , updateImage: function (newImage, oldImage) {
        if (newImage) { this.add(newImage); }
        if (oldImage) { this.remove(oldImage); }
    }
    , applyDetails: function (config) {
        return Ext.factory(config, newapp.custom.DIThumbnailDetails, this.getDetails());
    }
    , updateDetails: function (newDetails, oldDetails) {
        if (newDetails) { this.add(newDetails); }
        if (oldDetails) { this.add(oldDetails); }
    }
});

here is the custom class for the details in the dataitem:

Ext.define('newapp.custom.DIThumbnailDetails', {
    extend: 'Ext.Container'
    , xtype: 'DIThumbnailDetails'


    , requires: [
        'Ext.field.Checkbox'
    ]


    , config: {
        thumbnailTitle: null
        , thumbnailButton: null
        , text1: null
        , text2: null
        , items: [
            {
                xtype: 'component'
                , cls: 'dithumbnail_details_title'
            }
            , {
                xtype: 'button'
                , ui: 'action-round'
                , cls: 'dithumbnai_detailsl_button'
            }
            , {
                xtype: 'component'
                , cls: 'dithumbnail_details_text'
            }
            , {
                xtype: 'component'
                , cls: 'dithumbnail_details_text'
            }
            , {
                xtype: 'checboxfield'
                , cls: 'dithumbnail_details_checkbox'
            }
        ]
    }
    , setThumbnailTitle: function (title) {
        //need to figure out some way to get component by css class
        this.getThumbnailTitle().setHtml(title);
    }
    , setThumbnailButton: function (text) {
        //need to figure out some way to get component by css class
        this.getThumbnailButton().setText(text);
    }
    , setText1: function (text) {
        //need to figure out some way to get component by css class
        this.getText1().setHtml(text);
    }
    , setText2: function (text) {
        //need to figure out some way to get component by css class
        this.getText2().setHtml(text);
    }
});

[=NR=]

So instead of using setHtml method of a Component one could create a new component with setters for every property he needs.

Ext.define('MyProduct',{
extend:'Ext.Contaier',
xtype:'mycomponenttype',
config:{
name:null,
image:null,
quantity:null,
items:[
{xtype:'component', id:'name'},
{xtype:'component', id:'image'}
{xtype:'component', id:'quantity'}
]
},
setName:function(name) //should i make this function to accept 2 parameter firsName and LastName ?
{ 
//update view element
},
setImage:function(image)
{
//update image element
},
setQuantity:function(image)
{
//update quantity
}
});

Now you have a new type that has setters for your needs, mycomponenttype, that could have any layout or tpl you want.


Now in you data item implementation you can set things like:

config: { 
dataMap: { 
getMyComp: { 
setName: 'name', //let say i want to send first name and last name to my custom component how can i do it?
setImage:'image',
setQuantity:'quantity'
} 
}, 
myComp: { 
xtype:'mycomponenttype'
}


}
,
applyMyComp: function(config){
return Ext.factory(config, MyProduct , this.getMyComp());
}

hi everyone,

does anyone know how to do the red line on the code quote above?