Re: [qooxdoo-devel] Set margin between listitems

[Phyo Arkar]

I added wrong code for Application.js , Disregard previous post. Here is
the correct one :


qx.Class.define("vlistest.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;
      }

      var rawData = [];
      for (var i = 0; i < 100000; i++)
      {
        rawData[i] = {
          label: "Item No " + i,
          icon:  "16"
        }
      }
      var model = qx.data.marshal.Json.createModel(rawData);

      var list = this.__configList = new qx.ui.list.List(model).set({
        scrollbarX: "on",
        selectionMode : "one",
        height: 400,
        width: 150,
        labelPath: "label",
        iconPath: "icon",
        iconOptions: {converter : function(data) {
          return
"http://demo.qooxdoo.org/current/demobrowser/resource/qx/icon/Tango/";
+ data + "/places/folder.png";
        }}
      });

      var that = this;

      this.getRoot().add(list);

      var btn1 = new qx.ui.form.Button("add new one and scroll");
      this.getRoot().add(btn1, {top : 350, left : 200});
      btn1.addListener("execute", function() {

        model.push(qx.data.marshal.Json.createModel({
          label: "LastONE",
          icon: 16
        }));


          list.getChildControl("pane").scrollRowIntoView(model.getLength()-1);

      }, this);

    }
  }
});

here is the appearance , i overridden  listitem and margin of 100:


qx.Theme.define("vlistest.theme.Appearance",
{
  extend : qx.theme.indigo.Appearance,

  appearances :
  {
    "list" :
    {
      alias : "scrollarea",
      include : "textfield"
    },

    "listitem" :
    {
      alias : "atom",

      style : function(states)
      {
        var padding = [3, 5, 3, 5];
        if (states.lead) {
          padding = [ 2, 4 , 2, 4];
        }
        if (states.dragover) {
          padding[2] -= 2;
        }

        var backgroundColor;
        if (states.selected) {
          backgroundColor = "background-selected"
          if (states.disabled) {
            backgroundColor += "-disabled";
          }
        }
        return {
          gap : 4,
          marginBottom : 100,
          padding : padding,
          backgroundColor : backgroundColor,
          textColor : states.selected ? "text-selected" : undefined,
          decorator : states.lead ? "lead-item" : states.dragover ?
"dragover" : "chatitem",
          opacity : states.drag ? 0.5 : undefined
        };
      }
    }
  }
});

Here is the decoration, i added a shadow border


qx.Theme.define("vlistest.theme.Decoration",
{
  extend : qx.theme.indigo.Decoration,

  decorations :
  {
    "chatitem": {
      style: {
        width: 0,
        shadowColor: "shadow",
        shadowBlurRadius: 1,
        widthBottom: 2,
        color: "rgb(217, 217, 217)",
        backgroundColor: "transparent"
      }
    }
  }
});

​

------------------------------------------------------------------------------

_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel