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