1

製品ビューに問題があります。商品データを表示したい。各製品は、画像とテキストを含む「ボックス」です。パネルに6つの製品を表示したい。私は多くの製品を持っているので、「カルーセルのようなビュー」が必要です。私のアイデアは次のとおりです。パネルに 6 つの製品を配置します。3 つのパネルをロードし、各パネルをカルーセル アイテムとして配置して、スワイプして別の「ページ」に移動できるようにします。

パフォーマンスを節約するために、カルーセルには常に 3 つのアイテムしか持たないようにしました。アクティブな「ページ」と前のページ、および後のページ。左右にスワイプして次のページを読み込むことができます。

カルーセルの「onActiveItemChange」リスナーにロジックを入れようとしましたが、カルーセル項目の追加/削除に大きな問題がありました。だから私の質問は、私が達成したいことをすることは可能ですか?

より良い代替手段はありますか？もちろん、私のデータはストアにありますが、その標準的なリスト ビューは必要ありません。

別の質問: カルーセルでの最初の試みが失敗したため、パネルを使用して Ext.Container (カード レイアウト) を構築しようとしました。しかし、パネルでスワイプイベントを聞くにはどうすればよいですか???

手伝ってくれてありがとう ;-）

4

2 に答える 2

1

カルーセルとストアを使用して、私も同じことをしています。カルーセルのすべてのページは、4/6 の子ビュー (パネル) を持つビュー (パネル) です。ストアの読み込み時に、これらの子を作成してページに分割し、それらのページをカルーセルに追加します。

これは私にとってはうまく機能しており、activeItemChangeでさらにページをロードしています:

    activeitemchange: function(container, value, oldValue, eOpts) {
        var activeItemIndex = container.getActiveIndex();
        var galleryTotal = container.getInnerItems() ? container.getInnerItems().length : 0;
        if ((activeItemIndex + 1 == galleryTotal)) {
            console.log("At last page, time to load");
            var store = this.config.store;
            store.nextPage({ addRecords: true });
        }
    }
于 2013-02-05T12:46:06.653 に答える
0

私はあなたの問題を理解していると思います。3 つのアイテムがあり、常に真ん中のアイテムを表示しているとします (先に進むと、アイテム 0 が破棄され、1 つのアイテムが作成されます)。そして、各アイテムには、リスト内のその場所に関連付けられた ID があると仮定します。

var current_item = Ext.getCmp('carousel_name').getActiveItem().getId();
current_item = Number(current_item.replace('item', ''));

//Objects to create
var next_item = current_item + 1;
var previous_item = current_item - 1;

//Objects to destroy
var next2_item = current_item + 2;
var previous2_item = current_item - 2;

//Create items
var createItem = function(item_location, type){
    var carousel_item = create_content(item_location);

    if(type == 'next'){
        Ext.getCmp('carousel_name').add(carousel_item);
    }else if(type == 'previous'){
        Ext.getCmp('carousel_name').insert(0, carousel_item);
        Ext.getCmp('carousel_name').setActiveItem(1);
    }
}
createItem(next_item,'next');
createItem(previous_item,'previous');

//Destroy items
if(Ext.getCmp('item'+previous2_item)){
    Ext.getCmp('carousel_name').getItems().items[0].destroy();//This is a hack, for some reason with the above commented out line, the item was getting destroyed but wasn't being removed from carousel_name
}
if(Ext.getCmp('item'+next2_item)){
    Ext.getCmp('carousel_name').getItems().items[Ext.getCmp('carousel_name').getMaxItemIndex()].destroy();//This is a hack, consistency with previous destroy (above)
}
于 2013-02-07T19:06:46.750 に答える