在sencha列表项目上显示隐藏div

Question

我创建了一个包含下面给出的代码的列表，它现在工作正常我想在列表的itemTap上显示hide extraInfo Div。我怎样才能做到这一点？请帮帮我

{
    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侦听器。然后你可以使用它的方法hide / show你的div，或toggle这样的隐藏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');
            }
        }
    }
}