[英]sencha touch add variables to templates/List/ etc
Looking around I found no solution for Sencha Touch (while I managed to get this working with ExtJS) so I am turning to you. 环顾四周,我找不到Sencha Touch的解决方案(虽然我设法让这个与ExtJS合作)所以我转向你。
New to Sencha touch I learned how to correctly bind a stor to a List component. Sencha touch的新手我学会了如何正确地将stor绑定到List组件。
My problem is that I need to work on a particular record before rending it to template. 我的问题是我需要在将其转换为模板之前处理特定记录。
My record coordinate
is like this : 我的记录coordinate
是这样的:
2.356095,48.879154,0.000000
With ExtJS I created a function that split it and render a link to GMaps
. 使用ExtJS,我创建了一个将其拆分并呈现GMaps
链接的函数。
My Questions : 我的问题:
Can I access my record as in extJS ( record.data.coordinates
) ? 我可以像在extJS( record.data.coordinates
)中那样访问我的记录吗?
How can I add new variables to use in itemTpl ? 如何添加要在itemTpl中使用的新变量?
MyAPP = new Ext.Application({
name: 'ListDemo',
launch: function() {
MyAPP.listPanel = new Ext.List({
id: 'indexlist',
store: MyAPP.ListStore,
itemTpl: '<div>{name}<br>{coordinates}</div>'
}); // end of MyAPP.listPanel
function renderMap(value, p, record) {
var split = record.data.coordinates.split(',');
var lat = split[0];
var lon = split[1];
return Ext.String.format(
'<b><a href="http://maps.google.com/maps?q={2}+{1}+({3})" target="_blank">Google Map</a>',
value,
lat,
lon,
record.data.Adresse
);
}
}
});
Thanks for your help, 谢谢你的帮助,
Julius. 朱利叶斯。
You can have inline javascript code in your template that will split the coordinates variable. 您可以在模板中使用内联javascript代码来分割坐标变量。 Here is example from the docs: 以下是文档中的示例:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);
Notice how the values.company.toUpperCase()
is handled. 注意如何处理values.company.toUpperCase()
。 So to get to your variable you can do values.coordinates
. 因此,要获得变量,您可以执行values.coordinates
。
Another solution is to have a template member function. 另一种解决方案是具有模板成员功能。 Here is another example from the sencha docs. 这是sencha文档的另一个例子。
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
// use opposite if statement to simulate 'else' processing:
'<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
'</tpl></p>',
{
// XTemplate configuration:
compiled: true,
// member functions:
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
}
);
Check the docs here http://docs.sencha.com/touch/1-1/#!/api/Ext.XTemplate if you need more help. 如果您需要更多帮助,请查看此处的文档http://docs.sencha.com/touch/1-1/#!/api/Ext.XTemplate 。
Define the tpl
object before this code. 在此代码之前定义tpl
对象。
MyAPP.listPanel = new Ext.List({
id: 'indexlist',
store: MyAPP.ListStore,
itemTpl: tpl // use the tpl object like this
});
Because you mentioned you know how to make it work in ExtJS, I assume that you know the functionality of Ext.XTemplate. 因为你提到你知道如何使它在ExtJS中工作,我假设你知道Ext.XTemplate的功能。 So, for itemTpl just use XTemplate. 因此,对于itemTpl,只需使用XTemplate。 Something like this: 像这样的东西:
var tpl = new Ext.XTemplate('<div>{name}<br>{coordinates}</div>', {
// XTemplate methods here
});
And use this tpl in itemTPl: 并在itemTPl中使用此tpl:
MyAPP.listPanel = new Ext.List({
id: 'indexlist',
store: MyAPP.ListStore,
itemTpl: tpl
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.