2 つのボタンを使用して ( http://news.qooxdoo.org/tutorial-part-4-2-custom-widgets-4に基づいて) カスタム リスト項目ビューを作成しました。
1 つのボタンで新しいウィンドウが開きます (url は listitem のプロパティです)。2 番目のボタンは、マップ上のアイテムを見つけます。
リストの最初の要素では問題なく動作しますが、スクロール バーでリストを下にスクロールし、リスト項目のボタンをもう一度クリックすると、URL と場所が間違っています。URLは別のリストアイテム（通常は上記のもの）からのものです。
どんな助けでも本当に感謝します。
コードは次のとおりです。
qx.Class.define("appli.Application",
{
extend : qx.application.Standalone,
members :
{
main : function()
{
this.base(arguments);
if (qx.core.Environment.get("qx.debug"))
{
qx.log.appender.Native;
qx.log.appender.Console;
}
//qx.theme.manager.Meta.getInstance().setTheme(qx.theme.Modern);
var model = this.model = new qx.data.Array();
var list = this.list = new qx.ui.list.List(model);
list.setDecorator(null);
this.list.setItemHeight(150);
var delegate = {
createItem : function() {
return new appli.ItemView();
},
bindItem : function(controller, item, id) {
controller.bindProperty("title", "post", null, item, id);
controller.bindProperty("imageUrl", "icon", null, item, id);
controller.bindProperty("url", "link", null, item, id);
},
configureItem : function(item) {
item.getChildControl("icon").setWidth(160);
item.getChildControl("icon").setHeight(120);
item.getChildControl("icon").setMarginRight(6);
//item.getChildControl("icon").setScale(true);
item.setMinHeight(52);
}
};
this.list.setDelegate(delegate);
this.getRoot().add(this.list, {edge : 0});
//Test with local data
/*var data = [
["Car","http://www.leboncoin.fr/voitures/553182339.htm?ca=15_s","http://193.164.196.30/thumbs/963/963318091858592.jpg"],
["Game","","http://193.164.197.30/thumbs/956/956317090813867.jpg"],
["Veste style imper Rouge","http://www.leboncoin.fr/vetements/553226581.htm?ca=12_s","http://193.164.197.50/thumbs/960/960318094103573.jpg"],
["Lot de divers bibelots","http://www.leboncoin.fr/decoration/553226580.htm?ca=12_s","http://193.164.197.40/thumbs/960/960318090959516.jpg"],
["Trotteur","http://www.leboncoin.fr/equipement_bebe/553226579.htm?ca=12_s","http://193.164.196.60/thumbs/961/961318097025582.jpg"],
["Bouddha en résine - TROC 3000 TROC3000","http://www.leboncoin.fr/decoration/355911087.htm?ca=12_s","http://193.164.197.40/thumbs/963/963318096001428.jpg"],
["Téléphone Analogique sans fils","http://www.leboncoin.fr/telephonie/553226578.htm?ca=12_s","http://193.164.197.40/thumbs/961/961318096589452.jpg"],
["Bureau","http://www.leboncoin.fr/ameublement/553226577.htm?ca=12_s","http://193.164.196.60/thumbs/963/963318098189494.jpg"],
["Appareil Fitness Abdos-Fessier- Hanches","http://www.leboncoin.fr/sports_hobbies/553226576.htm?ca=12_s","http://193.164.197.30/thumbs/964/964318093519411.jpg"],
["Aire de jeux gonflable","http://www.leboncoin.fr/equipement_bebe/553226575.htm?ca=12_s","http://193.164.197.30/thumbs/963/963318091253099.jpg"],
["Robe Lipsy violette taille 40 So95","http://www.leboncoin.fr/vetements/553226574.htm?ca=12_s","http://193.164.196.50/thumbs/968/968318099827570.jpg"],
["Bureau en bois massif avec tiroirs","http://www.leboncoin.fr/ameublement/553226573.htm?ca=12_s","http://193.164.196.50/thumbs/968/968318094933722.jpg"],
["Canapé clic clac","http://www.leboncoin.fr/ameublement/553226572.htm?ca=12_s","http://193.164.196.40/thumbs/963/963318090754017.jpg"],
["Anneau bague en argent reminescence et sa pochette","http://www.leboncoin.fr/montres_bijoux/553226571.htm?ca=12_s","http://193.164.197.60/thumbs/960/960318094599407.jpg"],
["Jeu de palets + dalle de plomb","http://www.leboncoin.fr/jeux_jouets/553226570.htm?ca=12_s","http://193.164.197.30/thumbs/960/960318098708467.jpg"],
["Bois de chauffage sec","http://www.leboncoin.fr/bricolage/553226569.htm?ca=12_s","http://193.164.196.40/thumbs/960/960318097353553.jpg"],
["Manteau garcon t9-10 ans de chez Zara","http://www.leboncoin.fr/vetements/553226568.htm?ca=12_s","http://193.164.196.50/thumbs/964/964318094104186.jpg"],
["Réussir le Concours Passerelle 2","http://www.leboncoin.fr/livres/553226567.htm?ca=12_s","http://193.164.196.60/thumbs/964/964318096810766.jpg"],
["Porte capsule nespresso","http://www.leboncoin.fr/arts_de_la_table/553226565.htm?ca=12_s","http://193.164.196.30/thumbs/968/968318093179824.jpg"],
["Lot de pulls de grossesse","http://www.leboncoin.fr/vetements/553226564.htm?ca=12_s","http://193.164.197.30/thumbs/969/969318094345851.jpg"],
["Poussette trois roue","http://www.leboncoin.fr/equipement_bebe/553226563.htm?ca=12_s","http://193.164.197.50/thumbs/960/960318099320949.jpg"],
["Lot 9 bodys 18 mois","http://www.leboncoin.fr/vetements_bebe/553226562.htm?ca=12_s","http://193.164.196.60/thumbs/963/963318097981206.jpg"],
["pull promod","http://www.leboncoin.fr/vetements/553226561.htm?ca=12_s","http://193.164.196.30/thumbs/966/966318091577576.jpg"],
["Robe t.xs marque benetton","http://www.leboncoin.fr/vetements/553226560.htm?ca=12_s","http://193.164.197.40/thumbs/967/967318090362940.jpg"],
["Chemise homme napapijri xxl","http://www.leboncoin.fr/vetements/489677448.htm?ca=12_s","http://193.164.197.60/thumbs/968/968318095631775.jpg"],
["Ampli akai rx-v 357","http://www.leboncoin.fr/image_son/468870018.htm?ca=12_s","http://193.164.196.30/thumbs/961/961318097647320.jpg"],
["Grosse pelote rose 210 gr aspect mohair","http://www.leboncoin.fr/sports_hobbies/381151108.htm?ca=12_s","http://193.164.196.60/thumbs/962/962318094347598.jpg"],
["Location maison bourg Nanteuil en Vallée","http://www.leboncoin.fr/locations/553226559.htm?ca=12_s","http://193.164.197.50/thumbs/967/967318098127277.jpg"],
["Lot de vêtements bébé garçon 6 mois: 35 pièces","http://www.leboncoin.fr/vetements_bebe/553226558.htm?ca=12_s","http://193.164.197.40/thumbs/967/967318098074684.jpg"],
["Lemax manège zinger","http://www.leboncoin.fr/decoration/553226557.htm?ca=12_s","http://193.164.196.40/thumbs/967/967318098002537.jpg"],
["Pierrade de marque tefal","http://www.leboncoin.fr/electromenager/553226556.htm?ca=12_s","http://193.164.197.60/thumbs/968/968318090030679.jpg"],
["Lustre Turquoise","http://www.leboncoin.fr/decoration/553226555.htm?ca=12_s","http://193.164.197.60/thumbs/962/962318092733887.jpg"],
["Aire de jeux","http://www.leboncoin.fr/equipement_bebe/553226554.htm?ca=12_s","http://193.164.196.40/thumbs/965/965318096816865.jpg"],
["Cuisinière gaz / électrique avec tourne broche","http://www.leboncoin.fr/electromenager/553226553.htm?ca=12_s","http://193.164.197.50/thumbs/964/964318096264301.jpg"],
["Canape d'angle avec Table Basse et Tapis","http://www.leboncoin.fr/decoration/553226551.htm?ca=12_s","http://193.164.196.40/thumbs/963/963318092977145.jpg"],
["Bourriquet bleu en velours","http://www.leboncoin.fr/equipement_bebe/553226549.htm?ca=12_s","http://193.164.196.30/thumbs/968/968318090336920.jpg"]
];
for(var i=0;i<data.length;i++){
this.list.getModel().push(new appli.Item(data[i][0],data[i][1],data[i][2],""));
}*/
//Test with XHR Request
var req = new qx.io.request.Xhr("http://cartorion.appspot.com/lbcfeed?q=&o=1&location=&category=velos®ion=toutes&dept=tous");
req.setAsync(true);
req.addListener("success", function(e) {
var resp = e.getTarget().getResponse();
var lines = resp.split('\n');
for (var i=0;i<lines.length-1;i++){
var values = lines[i].split(",");
//var myitem = new appli.model.Item(values[0],values[1],parseFloat(values[2]),values[3],new Date(values[6]),values[5],values[4]);
this.list.getModel().push(new appli.Item(values[0],values[5],values[4],""));
}
},this);
req.send();
}
}
});
qx.Class.define("appli.Item", {
extend : qx.core.Object,
construct : function (title,url,imageUrl,latlng){
this.base(arguments);
this.setTitle(title);
this.setUrl(url);
this.setImageUrl(imageUrl);
this.setLatlng(latlng);
},
properties : {
/**
* Nom de carte
*/
title : {
check : "String",
event : "changeTitle",
init : ""
},
imageUrl : {
check : "String",
event : "changeImageUrl",
init : ""
},
url : {
check : "String",
event : "changeUrl",
init : ""
},
latlng : {
check : "String",
event : "changeLatlng",
init : ""
}
}
});
qx.Class.define("appli.ItemView", {
extend : qx.ui.core.Widget,
include : [qx.ui.form.MModelProperty],
construct : function()
{
this.base(arguments);
this.set({
paddingTop:14,
paddingLeft:4,
maxHeight : 130
});
var border= new qx.ui.decoration.Single();
border.setBottom(1,"dashed","#BBBBBB");
this.setDecorator(border);
// initialize the layout and allow wrap for "post"
var layout = new qx.ui.layout.Grid(2, 2);
layout.setColumnFlex(1, 1);
this._setLayout(layout);
// create the widgets
this._createChildControl("icon");
this._createChildControl("post");
this._createChildControl("link");
},
properties :
{
icon :
{
check : "String",
apply : "_applyIcon",
nullable : true
},
post :
{
check : "String",
apply : "_applyPost",
nullable : true
},
link :
{
check : "String",
apply : "_applyLink",
nullable : true
},
latlng :
{
check : "String",
apply : "_applyLink",
nullable : true
}
},
members :
{
// overridden
_createChildControlImpl : function(id)
{
var control;
switch(id)
{
case "icon":
control = new qx.ui.basic.Image(this.getIcon());
control.setAnonymous(true);
this._add(control, {row: 0, column: 0, rowSpan: 2});
break;
case "post":
control = new qx.ui.basic.Label(this.getPost());
control.setAnonymous(true);
control.setRich(true);
this._add(control, {row: 0, column: 1});
break;
case "link":
control = new qx.ui.container.Composite(new qx.ui.layout.HBox());
control.setMinHeight(200);
var details = new qx.ui.form.Button("See details").set({
maxWidth:120,
maxHeight:25,
marginRight:6
});
details.addListener("execute",function(){
window.open(this.getLink());
},this);
control.add(details);
var locate = new qx.ui.form.Button("See on map").set({
maxWidth:120,
maxHeight:25,
marginRight:6
});
locate.addListener("execute",function(){
//Do something with this.getLatlng()
},this);
control.add(locate);
this._add(control, {row: 1, column: 1});
break;
}
return control || this.base(arguments, id);
},
_applyIcon : function(value, old) {
var icon = this.getChildControl("icon");
icon.setSource(value);
},
_applyPost : function(value, old)
{
var post = this.getChildControl("post");
post.setValue("<b>"+value+"</b>");
},
_applyLink : function(value, old)
{
var link = this.getChildControl("link");
}
}
});