Question

我有一个列表来填充商店中的列表项。当项目列表点击时，我只想在其中显示另一个面板。我不想使用Ext.AccordionLayoutLIst。

Answer 1

您可以向模型添加新密钥

 { name: 'isOpen', type: 'boolean', defaultValue: false }

on itemtap

 record.set('isOpen', true)

新的部分将会显示出来。

以下是模板：

'<div class="expanded-container">',
    {standard}
    '<tpl if="isOpen">',
        '<div class="newContainer">{onlyShownIfOpen}</div>',
    '</tpl>',
'</div>'

Answer 2

'<div class="search-list-item-container">',
                        '<div class="search-list-details-field">',
                            /*** Other html elements Exist here ****/
                        '</div>',
                        '<div class="search-list-btn-field">',
                            '<input class="play-btn" type="button" value="Play">',
                            '<input class="add-btn"  type="button" value="Add to Playlist">',
                        '</div>',
                    '</div>'

假设我们有一个列表的itemTpl（上面给出），我们只想在点击相应的列表项时将“search-list-btn-field”div显示为面板。为了实现这一点，我们必须为“search-list-btn-field”类编写css，如下所示： -

.search-list-btn-field {
                display: flex;
                visibility: hidden;
                height: 0px;
}

.selected-search-list-item .search-list-btn-field {
        height: 40px !important;
        visibility: visible !important;
    }
}

最后，我们必须将'selectedCls'属性添加到list ..

的配置中

selectedCls: 'selected-search-list-item'

在项目列表上点击显示列表项Sencha Touch 2下方的面板

2 个答案: