항목 목록에서 목록 항목 아래에 패널 표시를 누르십시오. 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에만 해당 목록 항목을 탭하면 그것을 가능하게하기 위해, 우리는 아래로 "-검색 목록-btn을 필드"클래스에 대한 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'속성을 추가 할 필요가 ...

selectedCls: 'selected-search-list-item'