sencha touch 2.0의 목록 구성 요소를 확장 가능하게 만들 수 있습니까?

Question

데이터 저장소 (json으로 서버에서로드 된 데이터)를 사용하여 채워지는 목록 구성 요소가 있습니다. 데이터 저장소의 데이터 일부가 목록 항목으로 표시되며 목록 항목을 확장하고 (축소하려면 "-") 남은 항목을 표시 (/ 숨기기) 위해 왼쪽에 "+"버튼이 필요합니다 정보. itemTpl 태그에 몇 가지 자바 스크립트를 넣을 수는 있지만이 방법으로 부드러운 전환을 만드는 방법을 모릅니다. 어쩌면 목록 구성 요소에 대한 일부 표준 설정이 누락되었지만 정보를 찾을 수 없습니다. 어떤 도움을 주셔서 감사합니다.

Answer 1

이 기능을 수행하기위한 표준 설정이 없습니다. 그러나 이것은 달성 가능합니다. 다음과 같이 항목 템플릿을 만들 수 있습니다.

itemTpl: '<div class="plus"></div><div class="title">{title}</div><div class="hidden">{mydetails}</div>' 

처음에는 세부 정보가 숨겨져 있습니다. 귀하가 목록 항목을 살짝 누르면 애니메이션을 처리해야합니다. .. select() 방법은 Ext.dom.CompositeElementLite이다에서

itemtap: function(view,index,htmlElement,e,opts) { 

    // change the div plus to minu.. 
    // Get hold of the div with details class and animate 
    var el = htmlElement.select('div[class=hidden]'); 

    el.toggleCls('hidden'); //remove the hidden class if available.. 
    el.show(true); // show with animation 

}

개체를 얻을 수 많은 방법이 클래스를 참조하십시오 : 그래서, 당신의 경우에 당신은해야 할 것입니다. 이 개체에서 Ext.Anim으로 전화 할 수 있습니다 ..

Ext.Anim 클래스를 사용할 수 있습니다. 당신의 html 요소가 있으면 '세부 정보'DIV, 당신은 할 수 있습니다

Ext.Anim.run(detailsDiv,'slide',{ 
    out:false, 
    from: 'hiddenCSS', 
    to: 'visibleCSS' 
}); 

원하는 효과가 필요할 수 있습니다 더 설정에 Anim 클래스를 참조하십시오. 또한 이전에 클릭 (확장) 된 목록 항목을 추적해야합니다.