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课程。另请注意，您必须跟踪之前单击的（展开的）列表项。

是否有可能使sencha touch 2.0列表组件可以扩展其项目？

1 个答案: