1. #1
    Sencha User
    Join Date
    Oct 2013
    Location
    Minsk
    Posts
    39
    Vote Rating
    0
    samaelal is on a distinguished road

      0  

    Default How to insert a picture on the condition itemtpl

    How to insert a picture on the condition itemtpl


    Hello! Please tell me how to insert a picture on a condition in Itemtpl. I tried to insert a function but does not work ... Thanks in advance.


    Code:
    itemTpl :
                              '<img src="{this.resolveImage(values)}" width=100 height=80 margin-left=50px>'
                             +'<b style="color:#F00">{f1} {mode} {f2} {f3}</b>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f14}</p>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f4} {f13}</p>',
    
                               resolveImage: function () {
                                   if (value.mode == cp && value.f2 == 2 && value.f3 == 0) {
                                       return 'resources/images/goods-dlv.png';
                                   }
                                   return 'resources/images/goods-cap.png';
    
                               },

  2. #2
    Sencha User
    Join Date
    Jul 2013
    Posts
    81
    Vote Rating
    10
    tt88 will become famous soon enough

      1  

    Default


    Change your code slightly to include square brackets when referencing a function + include the argument in your function:

    Code:
    itemTpl :                          '<img src="{ [this.resolveImage(values)] }" width=100 height=80 margin-left=50px>'
                             +'<b style="color:#F00">{f1} {mode} {f2} {f3}</b>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f14}</p>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f4} {f13}</p>',
    
    
                               resolveImage: function (value) {
                                   if (value.mode == cp && value.f2 == 2 && value.f3 == 0) {
                                       return 'resources/images/goods-dlv.png';
                                   }
                                   return 'resources/images/goods-cap.png';
    
    
                               },

  3. #3
    Sencha User
    Join Date
    Oct 2013
    Location
    Minsk
    Posts
    39
    Vote Rating
    0
    samaelal is on a distinguished road

      0  

    Default


    still fails to establish code .... the list is not displayed. but rather appears empty .... have empty time ...

    bring clarity to the whole JS....


    Code:
    Ext
            .define(
                    'MM.view.Contacts',
                    {
                        extend : 'Ext.List',
                        xtype : 'contacts',
                        //id    : 'titleform',
                        config : {
                            title : 'Все отправки ',
                            id: 'homeTab',
                            store : 'otprStore',
                            itemTpl :                          '<img src="{ [this.resolveImage(values)] }" width=100 height=80 margin-left=50px>'
                                +'<b style="color:#F00">{f1} {mode} {f2} {f3}</b>'
                                +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f14}</p>'
                                +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f4} {f13}</p>',
    
    
                            resolveImage: function (value) {
                                if (value.mode == cp && value.f2 == 2 && value.f3 == 0) {
                                    return 'resources/images/goods-dlv.png';
                                }
                                return 'resources/images/goods-cap.png';
    
    
                            }
                             +'<br><b style="color:#F00">{f1} {mode} {f2} {f3}</b>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f14}</p>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f4}</p>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f13}</p>',
    
    
    
    
    
                            items : [ {
                                xtype : 'toolbar',
                                docked : 'bottom',
                                scrollable : {
                                    direction : 'horizontal',
                                    indicators : false
                                },
                                layout : {
                                    pack : 'center',
                                    align : 'center'
                                },
                                defaults : {
                                    ui : 'plain'
                                },
    
                                items : [
                                        {
                                            xtype : 'button',
                                            text : '',
                                            action : 'logout', // ВЫХОДИМ ИЗ
                                            // АККАУНТА
                                            iconCls : 'delete',
                                            ui : 'decline'
                                        },
                                        {
                                            xtype : 'button',
                                            iconCls : 'arrow_left',
                                            id : 'namebutton',
                                            ui : 'back',
                                            handler : function() {
                                                //Ext.getCmp('titleform').setTitle('Забор');
                                                var sto = Ext.getStore('otprStore');
                                                sto.clearFilter();
                                                sto.filter('mode', 'cp');
                                                Ext.Msg    .alert(
                                                                'MM-Express',
                                                                'Сортированка на забор отправок',
                                                                Ext.emptyFn);
                                               // Ext.getCmp('Отправки').setTitle('Забор');
                                            },
                                            listeners: {
                                            tap: function(button){
                                                var homeTab = button.getParent();
                                                homeTab.tab.setTitle('Забор');
                                            }
                                        }
                                        },
                                        {
                                            xtype : 'button',
                                            iconCls : 'arrow_right',
                                            ui : 'forward',
                                            handler : function() {
                                                //Ext.getCmp('titleform').setTitle('Доставка');
                                                var sto = Ext.getStore('otprStore');
                                                sto.clearFilter();
                                                sto.filter('mode', 'dv');
                                                Ext.Msg
                                                        .alert(
                                                                'MM-Express',
                                                                'Сортированка на доставку отправок',
                                                                Ext.emptyFn);
                                            },
                                            listeners: {
                                                tap: function(button){
                                                    var homeTab = button.getParent();
                                                    homeTab.tab.setTitle('Доставка');
                                                }
                                        }
                                        },
                                        {
                                            xtype : 'button',
                                            iconCls : 'team',
                                            ui : 'action',
                                            handler : function() {
                                                //Ext.getCmp('titleform').setTitle('Все отправки');
                                                Ext.getStore('otprStore')
                                                        .clearFilter();
                                                Ext.Msg.alert('MM-Express',
                                                        'Весь список отправок',
                                                        Ext.emptyFn);
                                            },
                                            listeners: {
                                                tap: function(button){
                                                    var homeTab = button.getParent();
                                                    homeTab.tab.setTitle('Все отправки');
                                                }
                                        }
                                        },
                                        {
                                            xtype : 'button',
                                            iconCls : 'refresh',
                                            ui : 'action',
                                            id : 'reload'
    
                                        } ]
                            } ]
    
                        }
    
                    });

  4. #4
    Sencha User
    Join Date
    Oct 2013
    Location
    Minsk
    Posts
    39
    Vote Rating
    0
    samaelal is on a distinguished road

      0  

    Default


    pls help me...

  5. #5
    Sencha User
    Join Date
    Jul 2013
    Posts
    81
    Vote Rating
    10
    tt88 will become famous soon enough

      1  

    Default


    1. Can you get it to work with a simple list item, not using a function?
    2. Is it a layout/display? Try setting the minHeight of your list, to make sure it is not a list size issue. Eg. minHeight:'200px' in the config for the list.

  6. #6
    Sencha User
    Join Date
    Oct 2013
    Location
    Minsk
    Posts
    39
    Vote Rating
    0
    samaelal is on a distinguished road

      0  

    Default


    I get this:
    I get Data from JSON there is the value of "mode" "f2" "f3" fashion on him and is determined by what the picture wakes. It turns out like the picture.

    Why is that instead of a picture put [Object object]

    Безымянный.jpg

  7. #7
    Sencha User
    Join Date
    Jul 2013
    Posts
    81
    Vote Rating
    10
    tt88 will become famous soon enough

      1  

    Default


    This is probably because you are including your function definition as html in the template. In your pasted code you have:

    Code:
    itemTpl :  '<img src="{ [this.resolveImage(values)] }" width=100 height=80 margin-left=50px>'
                                +'<b style="color:#F00">{f1} {mode} {f2} {f3}</b>'
                                +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f14}</p>'
                                +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f4} {f13}</p>',
    
    
    
    
                            resolveImage: function (value) {
                                if (value.mode == cp && value.f2 == 2 && value.f3 == 0) {
                                    return 'resources/images/goods-dlv.png';
                                }
                                return 'resources/images/goods-cap.png';
    
    
    
    
                            }
                             +'<br><b style="color:#F00">{f1} {mode} {f2} {f3}</b>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f14}</p>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f4}</p>'
                             +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f13}</p>',
    You should have the function defined separately like this:
    Code:
    itemTpl :                          '<img src="{ [this.resolveImage(values)] }" width=100 height=80 margin-left=50px>'
                                +'<b style="color:#F00">{f1} {mode} {f2} {f3}</b>'
                                +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f14}</p>'
                                +'<p style=color:Gray style=font-size:40px style=font-weight:bold>{f4} {f13}</p>'
                                +'<!-- All other html content here -->',
    
    
                            resolveImage: function (value) {
                                if (value.mode == cp && value.f2 == 2 && value.f3 == 0) {
                                    return 'resources/images/goods-dlv.png';
                                }
                                return 'resources/images/goods-cap.png';
                            }
    The function returns a string that you insert into your template at the point you call it: { [this.resolveImage(values)] }, so no need for it to be included as a piece in your html

  8. #8
    Sencha User
    Join Date
    Oct 2013
    Location
    Minsk
    Posts
    39
    Vote Rating
    0
    samaelal is on a distinguished road

      0  

    Default


    Do for your advice. It turns out like the picture. Do not know where I am making a mistake. Maybe I am wrong in something.
    Безымянный.JPG

    itemTpl: [
    '<div>'
    + '<div>'
    + '<div><img src="{[this.statusImage(values)]}" width=100 height=80 margin-left=50px></div>'
    + '<div><img src="{ [this.doplStatus(values)]}" width=100 height=80 margin-left=50px</div>'
    + '<div style=position:relative>'
    + '<br><b style="color:red">{f1} {mode} {f2} {f3}</b>'
    + '<p style=color:Gray style=font-size:40px style=font-weight:bold>{f14}</p>'
    + '<p style=color:Gray style=font-size:40px style=font-weight:bold>{f4}</p>'
    + '<p style=color:Gray style=font-size:40px style=font-weight:bold>{f13}</p>'
    + '</div>'
    + '</div>'
    + '</div>',


    { doplStatus: function (value) {
    var imgSt = this.get('f18');
    if (imgSt == true) {
    return 'resources/images/surcharge.png';
    }
    },
    statusImage: function (value) {
    var modeField = this.get('mode');
    var f3Field = this.get('f3');
    var f2Field = this.get('f2');
    if (modeField == cp && f3Field == 2 && f2Field == 0) {
    return 'resources/images/goods-dlv.png';
    }
    return 'resources/images/goods-cap.png';
    }
    }],

  9. #9
    Sencha User
    Join Date
    Jul 2013
    Posts
    81
    Vote Rating
    10
    tt88 will become famous soon enough

      1  

    Default


    - Check you don't have syntax errors (Eg. why does your function doplStatus have curly braces around?)
    - In template functions 'this' refers to some scope deep within the list item, so something like 'this.get('mode')' and 'this.get('f3');' makes no sense. You pass the model data into the function & reference that data inside the function. So in this function you would access the property: value.f3

    To get things to work you need to understand what each step is doing. Get a small simple example working first to make sure you understand what is going on & then build up from there.

    Here is an outline of how the template definition works and how functions get referenced:
    Code:
    itemTpl: [
    '<div>{propName1}, {[someFunction1(values.propName2)]}, {[someFunction2(values)]}</div><!-- This is your list html, it might use a model property such as {propName1}, or might call a function passing a specific model property like {[someFunction1(values.propName2)]},  or might call a function passing all the model's data like {[someFunction2(values)]}--->', 
    
    someFunction1(property) {
    // In this function you passed through a specific model property (in the html you invoke the function: someFunction1(values.propName2)
    
    return property;
    }, 
    
    someFunction2(modelData) { 
    // you can have many functions in the template, separated by a comma. 
    // In this function you passed through the full model data (in the html you invoke the function: someFunction2(values). In a list item template, 'values' is equivalent to a model's model.getData() value). So accessing a property in a function where you passed 'values' as an argument will be done like: modelData.propName3
    
    return modelData.propName3;
    }
    ]
    So for a model that has:
    propName1 = 'Property 1'
    propName2 = 'Property 2'
    propName3 = 'Property 3'

    The list item will display the following:
    Property 1, Property 2, Property 3

  10. #10
    Sencha User
    Join Date
    Oct 2013
    Location
    Minsk
    Posts
    39
    Vote Rating
    0
    samaelal is on a distinguished road

      0  

    Default


    Oh my god ... I do not know what to do ... how difficult it is to be brand new in this business ... Tried what you suggest but nothing is impossible ... Can tell me again that I'm not doing this right or give an example .


    In fact I want to make a function which provided that the "mode" " f2 " , " f3 " when a certain value bet a certain picture . for example mode = cp and f2 = 0 and f3 = 2 is a picture if there is no match then the other .... that's about what I want to get with this function .... and do not understand how this can be done. For clarity, we give himself JS and model programs .


    Code:
    Ext
        .define(
        'MM.view.Contacts',
        {
            extend: 'Ext.List',
            xtype: 'contacts',
            config: {
                title: 'Все отправки ',
                id: 'homeTab',
                store: 'otprStore',
                itemTpl: [
                          '<div>'
                        + '<div>'
                        + '<div><img src="{[this.statusImage(values)]}" width=100 height=80 margin-left=50px></div>'
                        + '<div><img src="{[this.doplStatus(values)]}" width=100 height=80 margin-left=50px</div>'
                        + '<div style=position:relative>'
                        + '<br><b style="color:red">{f1} {mode} {f2} {f3}</b>'
                        + '<p style=color:Gray style=font-size:40px style=font-weight:bold>{f14}</p>'
                        + '<p style=color:Gray style=font-size:40px style=font-weight:bold>{f4}</p>'
                        + '<p style=color:Gray style=font-size:40px style=font-weight:bold>{f13}</p>'
                        + '</div>'
                        + '</div>'
                        + '</div>',
    
    
                    {   doplStatus: function (value) {
                        var d = this.data;
                        if (d.f18 == true) {
                            return 'resources/images/surcharge.png';
                                           }
                    },
                        statusImage: function (value) {
                            var d = this.data;
                            if (d.mode == cp && d.f3 == 2 && d.f2 == 0) {
                                return 'resources/images/goods-dlv.png';
                            }
                            return 'resources/images/goods-cap.png';
                        }
                    }],
                            items : [ {
                                xtype : 'toolbar',
                                docked : 'bottom',
                                scrollable : {
                                    direction : 'horizontal',
                                    indicators : false
                                },
                                layout : {
                                    pack : 'center',
                                    align : 'center'
                                },
                                defaults : {
                                    ui : 'plain'
                                },
    
                                items : [
                                        {
                                            xtype : 'button',
                                            text : '',
                                            action : 'logout', // ВЫХОДИМ ИЗ
                                            // АККАУНТА
                                            iconCls : 'delete',
                                            ui : 'decline'
                                        },
                                        {
                                            xtype : 'button',
                                            iconCls : 'arrow_left',
                                            id : 'namebutton',
                                            ui : 'back',
                                            handler : function() {
                                                var sto = Ext.getStore('otprStore');
                                                sto.clearFilter();
                                                sto.filter('mode', 'cp');
                                                Ext.Msg    .alert(
                                                                'MM-Express',
                                                                'Сортированка на забор отправок',
                                                                Ext.emptyFn);
                                            },
                                            listeners: {
                                            tap: function(button){
                                                var homeTab = button.getParent();
                                                homeTab.tab.setTitle('Забор');
                                            }
                                        }
                                        },
                                        {
                                            xtype : 'button',
                                            iconCls : 'arrow_right',
                                            ui : 'forward',
                                            handler : function() {
                                                var sto = Ext.getStore('otprStore');
                                                sto.clearFilter();
                                                sto.filter('mode', 'dv');
                                                Ext.Msg
                                                        .alert(
                                                                'MM-Express',
                                                                'Сортированка на доставку отправок',
                                                                Ext.emptyFn);
                                            },
                                            listeners: {
                                                tap: function(button){
                                                    var homeTab = button.getParent();
                                                    homeTab.tab.setTitle('Доставка');
                                                }
                                        }
                                        },
                                        {
                                            xtype : 'button',
                                            iconCls : 'team',
                                            ui : 'action',
                                            handler : function() {
                                                //Ext.getCmp('titleform').setTitle('Все отправки');
                                                Ext.getStore('otprStore')
                                                        .clearFilter();
                                                Ext.Msg.alert('MM-Express',
                                                        'Весь список отправок',
                                                        Ext.emptyFn);
                                            },
                                            listeners: {
                                                tap: function(button){
                                                    var homeTab = button.getParent();
                                                    homeTab.tab.setTitle('Все отправки');
                                                }
                                        }
                                        },
                                        {
                                            xtype : 'button',
                                            iconCls : 'refresh',
                                            ui : 'action',
                                            id : 'reload'
    
                                        } ]
                            } ]
    
                        }
    
                    });

    Code:
    Ext.define('MM.model.otprModel', {
        extend : 'Ext.data.Model',
        xtype : 'otprmodel',
        config : {
            fields : [ {
                name : 'mode',
                type : 'string'
            }, {
                name : 'id',
                type : 'string'
            }, {
                name : 'f1',
                type : 'string'
            }, {
                name : 'f2',
                type : 'string'
            }, {
                name : 'f3',
                type : 'string'
            }, {
                name : 'f4',
                type : 'string'
            }, {
                name : 'f5',
                type : 'string'
            }, {
                name : 'f6',
                type : 'number'
            }, {
                name : 'f7',
                type : 'number'
            }, {
                name : 'f8',
                type : 'number'
            }, {
                name : 'f9',
                type : 'string'
            }, {
                name : 'f10',
                type : 'string'
            }, {
                name : 'f11',
                type : 'string'
            }, {
                name : 'f12',
                type : 'string'
            }, {
                name : 'f13',
                type : 'string'
            }, {
                name : 'f14',
                type : 'string'
            }, {
                name : 'f15',
                type : 'string'
            }, {
                name : 'f16',
                type : 'string'
            }, {
                name : 'f17',
                type : 'string'
            }, {
                name : 'f18',
                type : 'boolean'
            }, {
                name : 'f19',
                type : 'string'
            }, {
                name : 'f20',
                type : 'string'
            }, {
                name : 'f30',
                type : 'string'
            }
            ]
        },
    
        fullName : function() {
            var d = this.data;
            var names = [
                (!d.f1 ? "" : d.f1 + "") // ,
            ];
            return names.join(" ");
        }
    
    });

Thread Participants: 1

Tags for this Thread

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