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
    604
    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
    91
    Vote Rating
    1
    =NR= is on a distinguished road

      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
    604
    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
    91
    Vote Rating
    1
    =NR= is on a distinguished road

      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
    91
    Vote Rating
    1
    =NR= is on a distinguished road

      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?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar