list - 是否可以让 sencha touch 2.0 列表组件使其项目可扩展？

Question

我有一个使用数据存储（从服务器加载为 json 的数据）填写的列表组件。数据存储中的一部分数据显示为列表项，我需要在其左侧添加某种“+”按钮来展开列表项（以及“-”折叠）以显示（/隐藏）剩余部分信息。我可以简单地将一些 javascript 放到 itemTpl 标记中，但我不知道如何以这种方式进行平滑过渡。也许我缺少列表组件的一些标准设置，但我找不到任何信息。任何帮助表示赞赏。

Answer 1

没有执行此功能的标准设置。但这是有可能实现的。你可以让你的项目模板是这样的：

itemTpl: '<div class="plus"></div><div class="title">{title}</div><div class="hidden">{mydetails}</div>'

最初，细节是隐藏的。当您点击列表项时，您需要处理动画。因此，在您的事件中，您必须执行以下操作：

itemtap: function(view,index,htmlElement,e,opts) {

    // change the div plus to minu..
    // Get hold of the div with details class and animate
    var el = htmlElement.select('div[class=hidden]');

    el.toggleCls('hidden'); //remove the hidden class if available..
    el.show(true); // show with animation

}

对象是从select()method is Ext.dom.CompositeElementLite..获取的。更多方法请参考这个类。您也可以Ext.Anim从此对象调用 ..

要制作动画，您可以使用Ext.Anim该类。一旦你有了'details' div 的 html 元素，你可以：

Ext.Anim.run(detailsDiv,'slide',{
    out:false,
    from: 'hiddenCSS',
    to: 'visibleCSS'
});

请参阅Anim类以获取可能需要达到所需效果的更多设置。另请注意，您必须跟踪先前单击（展开）的列表项。