移动列表可折叠项目

问题描述:

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

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元素没有影响。任何想法如何解决它?

这样的事情,也许?

Playground example

+0

谢谢,但不是这样。你创建的是两个可折叠容器中的两个列表。我需要一个可折叠容器列表作为项目。 我明白,列表提供程序克隆的元素。结果是轻拍监听器的目标显示已折叠,但页面上的元素不是。对某个项目执行的任何操作都不会对实际点击的列表项产生影响。 – Kama