移动列表可折叠项目
问题描述:
我正在尝试创建可折叠容器列表。容器应该折叠并展开。我创建了一个示例列表项呈示器。移动列表可折叠项目
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元素没有影响。任何想法如何解决它?
谢谢,但不是这样。你创建的是两个可折叠容器中的两个列表。我需要一个可折叠容器列表作为项目。 我明白,列表提供程序克隆的元素。结果是轻拍监听器的目标显示已折叠,但页面上的元素不是。对某个项目执行的任何操作都不会对实际点击的列表项产生影响。 – Kama