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');
            }
        }
    }
}