3

データストア（サーバーからjsonとしてロードされたデータ）を使用して入力されるリストコンポーネントがあります。データストアのデータの一部はリストアイテムとして表示されます。リストアイテムを展開するには（および折りたたむには「-」）、残りを表示（/非表示）するには、その左側にある種の「+」ボタンが必要です。情報。簡単にjavascriptをitemTplタグに入れることもできますが、この方法でスムーズに移行する方法がわかりません。リストコンポーネントのいくつかの標準設定が欠落している可能性がありますが、情報が見つかりません。助けていただければ幸いです。

4

1 に答える 1

5

この機能を実行するための標準設定はありません。しかし、これは達成可能です。次のようなアイテムテンプレートを作成できます。

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アニメーション化するには、クラスを使用できます。'details' divのhtml要素を取得したら、次のことができます。

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

目的の効果を得るために必要となる可能性のあるその他の設定については、Animクラスを参照してください。また、以前にクリックされた（展開された）リストアイテムを追跡する必要があることにも注意してください。

于 2011-12-21T17:53:03.677 に答える