是否有可能使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类。 另请注意，您必须跟踪之前单击的（展开的）列表项。