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()方法获取的Ext.dom.CompositeElementLite ..更多方法请引用此类。您也可以从此对象调用 Ext.Anim..

要制作动画，您可以使用 Ext.Anim 类。获得“详细信息”div 的 html 元素后，您可以:

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

引用Anim类以获得您想要的效果可能需要的更多设置。另请注意，您必须跟踪之前单击(展开)的列表项。