是否有可能讓sencha touch 2.0 list組件的項目可擴展？

我有一個列表組件使用數據存儲填充（數據從服務器加載爲json）。部分數據存儲中的數據顯示爲列表項，我需要在其左側某種「+」按鈕來展開列表項（和「 - 」以摺疊）以顯示（/隱藏）其餘部分信息。我可以簡單地將一些javascript放到itemTpl標籤中，但我不知道如何以這種方式平滑過渡。也許我缺少列表組件的一些標準設置，但我找不到任何信息。任何幫助讚賞。是否有可能讓sencha touch 2.0 list組件的項目可擴展？

來源

2011-12-21 igrek

沒有標準設置來執行此功能。但這是可能實現的。你可以讓你的項目模板如下所示：

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

最初，細節被隱藏。當您點擊列表項目時，您需要處理動畫。所以，在你的活動，你要做的：獲得

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

}

對象從select()方法是Ext.dom.CompositeElementLite ..請參閱本類更多的方法。您也可以從此對象中調用Ext.Anim.

要製作動畫，您可以使用Ext.Anim類。一旦你有你的HTML元素「細節」 DIV，您可以：

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

參考Anim類，可能需要有你想要的效果更多的設置。另外請注意，您將不得不跟蹤之前點擊（擴展）的列表項目。

來源

2011-12-21 17:53:03

感謝您的回覆，太好了！但是我無法獲得'details'div的html元素。我相信我做錯了，即時嘗試按如下操作：'itemtap'：function（list，index，item，evt）{/*...*/ var details = item.dom.getElementsByClassName（'details'） [0]; details.className + =「show」; /*...*/}這段代碼確實顯示細節，但我必須自己移除show類，並且我不能使用details.addCls，因爲它不是sencha觸摸元素。我相信這是Ext.Anim.run無法正常工作的原因。所以，你能否充實一點，我如何得到一個正確的參考。謝謝你的時間。 – igrek 2011-12-22 10:55:57

檢查udpated的代碼...我已經提供了代碼來顯示詳細信息當用戶點擊一個項目 – 2011-12-22 20:31:49

哇！非常感謝！我做了它的工作，但它是「var el = htmlElement.select（'div.hidden'）;」如果有人需要這個。 – igrek 2011-12-23 08:21:55

是否有可能讓sencha touch 2.0 list組件的項目可擴展？

回答

相關問題