1. #31
    Sencha User
    Join Date
    Apr 2012
    Location
    Denmark
    Posts
    71
    Answers
    1
    Vote Rating
    1
    hjeDK is on a distinguished road

      0  

    Default


    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:
    Code:
        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());
        },
    Code:
            
    dataMap: {            getEventData: {
    
    
                }
            },
    This works like a charm

  2. #32
    Sencha User
    Join Date
    Jun 2011
    Location
    Switzerland
    Posts
    16
    Vote Rating
    0
    chrigu is on a distinguished road

      0  

    Default


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

  3. #33
    Sencha User
    Join Date
    Mar 2012
    Location
    The Netherlands
    Posts
    75
    Answers
    13
    Vote Rating
    4
    SebasSP is on a distinguished road

      0  

    Default


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

  4. #34
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Maybe you don't handle well the record updates?

  5. #35
    Sencha User
    Join Date
    Mar 2012
    Location
    The Netherlands
    Posts
    75
    Answers
    13
    Vote Rating
    4
    SebasSP is on a distinguished road

      0  

    Default


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

  6. #36
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    100
    Answers
    2
    Vote Rating
    -1
    =NR= has a little shameless behaviour in the past

      0  

    Default


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


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


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


    Code:
    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.


    Code:
    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:
    Code:
    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

  7. #37
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Show us the code, to see how you did it.
    Latest thoughts on the subject: http://joy2share.com/senchatouch/

  8. #38
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    100
    Answers
    2
    Vote Rating
    -1
    =NR= has a little shameless behaviour in the past

      0  

    Default


    Quote Originally Posted by bluehipy View Post
    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:
    Code:
    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:

    Code:
    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);
        }
    });
    Last edited by =NR=; 18 Apr 2013 at 12:26 AM. Reason: finished reading the thread till last page and now need to figure out a way to select component based on css class

  9. #39
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    100
    Answers
    2
    Vote Rating
    -1
    =NR= has a little shameless behaviour in the past

      0  

    Default


    Quote Originally Posted by bluehipy View Post
    So instead of using setHtml method of a Component one could create a new component with setters for every property he needs.

    Code:
    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:
    Code:
    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?