Question

我正在尝试创建可折叠容器列表。容器应该折叠和展开。我创建了一个示例列表项呈示器。

qx.Class.define("mb.ui.list.QuotaWeekListRenderer",
{
  extend : qx.ui.mobile.list.renderer.Default,

  members :
  {
    __collapsible : null,
    __weeksContainer : null,

    _init : function()
    {
      this.ignoreBase;

      this.__collapsible = this._createCollapsible();

      this.add(this.__collapsible);
    },

    setTitle : function(title)
    {
      this.ignoreBase;

      if (title && title.translate)
      {
        this.__collapsible.setTitle(title.translate());
      }
      else
      {
        this.__collapsible.setTitle(title);
      }
    },

    addWeek : function(value)
    {
      var label = new qx.ui.mobile.basic.Label(value);
      this.__collapsible.add(label);
    },

    _createCollapsible : function()
    {
      return new qx.ui.mobile.container.Collapsible();
    },

    // overridden
    reset : function()
    {
      this.ignoreBase;

      this.setTitle("");
      this.__collapsible.getContent().removeAll();
    }
  }
});

var page = new qx.ui.mobile.page.NavigationPage();
page.setTitle("List");
page.addListener("initialize", function() 
{

  // List creation
  var list = new qx.ui.mobile.list.List({
    configureItem : function(item, data, row) 
      {
         item.setTitle("Week " + parseInt(data.weekNo));
         for (var i = 0, l = data.weekDates.length; i < l; i++)
         {
           item.addWeek(data.weekDates[i]);
         }
      },
      createItemRenderer : function()
      {
        return new mb.ui.list.QuotaWeekListRenderer();
      }    
  });

  // Create the data
  var data = [{title: "title1", weekNo: 1, weekDates : ["1/2/2014", "2/2/2014"]},
              {title: "title2", weekNo : 2, weekDates : ["2/3/2015", "9/3/2015"]}];


  list.setModel(new qx.data.Array(data));

  page.getContent().add(list);
},this);

this.getManager().addDetail(page);

page.show();

以上内容可以在Playground

中运行

我的问题是这些项目不会在“点击”上展开。监听器切换容器的“折叠”属性，但它对DOM元素没有影响。任何想法如何解决它？

Answer 1

这样的事，也许？

Playground example

移动列表可折叠项目

1 个答案: