0

我用 2 个按钮制作了一个自定义列表项视图(基于http://news.qooxdoo.org/tutorial-part-4-2-custom-widgets-4 )。

一个按钮打开一个新窗口(网址是列表项的属性)。第二个按钮在地图上定位项目。

它适用于列表的第一个元素,但如果我使用滚动条向下滚动列表并再次单击列表项的按钮,则 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&region=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");
    }
  }
});
4

1 回答 1

1

看来您可以通过以下方式修复它:

list.setPadding(0);
// OR
list.setFocusable(false);

我目前不确定根本原因是什么,但我会删除您的示例并在我们的bugzilla提交错误。

于 2013-10-25T11:42:16.803 回答