extjs - Show hide div on sencha list item tap

Question

I have created a list with the code given below it works fine now I want to show hide extraInfo Div on itemTap of the list. How can I Do that? Please help me

{
    xtype: 'list',
    scrollable: true,
    itemTpl: new Ext.XTemplate('<div class="schedule">',
                                            '<div class="scheduleInfo">',
                                                '<div class="gameDate">',
                                                    '<div class="weekDay">{weekDay}</div>',
                                                    '<div class="day">{day}</div>',
                                                '</div>',
                                                                                                '<div class="gameInfo">',
                                                        '<div class="timeLocation">',
                                                            '{time} / {location}',
                                                        '</div>', 
                                                                                                                '</div>',
                                                        '</div>',
                                            '<tpl if="hasExtraInfo === true">',
                                                '<div class="extraInfo">{extraInfo}</div>',
                                            '</tpl>',
                                        '</div>'
                        ),
    store: 'Schedule',
    itemCls: 'scheduleListItem',
    flex : 1
}

Answer 1

将itemTap侦听器添加到您的列表中。然后你可以使用它的方法隐藏/显示你的 div，或者像这样切换隐藏的 CSS 类：

{
    xtype: 'list',
    // ...
    listeners: {
        itemtap: function(list, index, target) {
            var div = target.element.down('.extraInfo');
            // avoid crashing for items with no extra info
            if (div) {
                div.toggleCls('x-hidden-display');
            }
        }
    }
}