Question

I have a list component which is filled out using a data store(data loaded from server as json). A part of data from data store is displayed as list items, and i need some kind of a “+” button to the left of it to expand a list item(and “-” to collapse) to reveal(/hide) the remaining info. I could simply put some javascript to itemTpl tag but i’ve no idea how to make smooth transitions this way. Maybe am missing some standard settings for a list component, but i can’t find any info. Any help appreciated.

Answer 1

There is no standard settings to do this functionality. But this is possible to achieve. You can have your item template as something like this:

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

Initially, the details is hidden. You need to handle the animation when your taps the list item. So, in your event you will have to do:

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

}

The object is obtained from select() method is Ext.dom.CompositeElementLite .. Refer this class for more methods. You can call the Ext.Anim from this object as well..

To animate you can use the Ext.Anim class. Once you have the html element of you ‘details’ div, you can:

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

Refer to Anim class for more setting that might be needed to have your desired effect. Also note that you will have to track the previously clicked (expanded) list items.