在項目列表上點擊顯示列表項下方的列表項Sencha Touch 2

Question

我有一個列表從商店填充列表項目。當項目列表點擊我只是想顯示其中的另一個面板。我不想使用Ext.AccordionLayoutLIst。

Answer 1

您可以在itemtap

record.set('isOpen', true) 

intantly新零件會顯示添加一個新的關鍵模型

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

。

這裏是模板：

'<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（上面給出）的名單，我們要顯示「搜索列表BTN場」 DIV作爲面板只當點擊相應的列表項時。爲了能夠，我們下面給出編寫CSS的「搜索列表BTN場」類： -

.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」屬性添加到列表的配置..

selectedCls: 'selected-search-list-item'