extjs - 在 sencha 列表项点击上显示隐藏 div

Question

我已经使用下面给出的代码创建了一个列表，现在它工作正常，我想在列表的 itemTap 上显示隐藏 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');
            }
        }
    }
}