PDA

View Full Version : How to insert a picture on the condition itemtpl



samaelal
17 Oct 2013, 3:03 AM
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.



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';

},

tt88
17 Oct 2013, 10:50 PM
Change your code slightly to include square brackets when referencing a function + include the argument in your function:



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';


},

samaelal
17 Oct 2013, 10:54 PM
still fails to establish code .... the list is not displayed. but rather appears empty .... have empty time ...

bring clarity to the whole JS....



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'

} ]
} ]

}

});

samaelal
19 Oct 2013, 12:56 PM
pls help me...

tt88
19 Oct 2013, 10:07 PM
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.

samaelal
20 Oct 2013, 12:46 AM
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]

46424

tt88
20 Oct 2013, 11:13 PM
This is probably because you are including your function definition as html in the template. In your pasted code you have:



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:


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

samaelal
21 Oct 2013, 1:52 AM
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.
46431

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';
}
}],

tt88
21 Oct 2013, 4:51 AM
- 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:


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

samaelal
22 Oct 2013, 12:12 AM
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 .



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'

} ]
} ]

}

});



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(" ");
}

});

tt88
22 Oct 2013, 10:47 PM
1. doplStatus is incorrectly placed inside curly braces: '{ doplStatus: ...'
2. In your function calls, 'this.data' will do nothing. To access a property of the model you passed as the arrgument: value.someProperty.

samaelal
22 Oct 2013, 11:25 PM
I'm sorry ... I do not know much yet to learn ... Could you give me the code my mistakes ... I would be very grateful to you.

tt88
23 Oct 2013, 1:31 AM
The mistakes are:

1. Curly braces around your function names are only around the 'doplStatus' function. The closing curly brace should be after your last function
2. The way you reference data in your function is incorrect, I gave an example of how to correctly reference a value in my previous reply