3

私はSenchaによって与えられた例に基づいて無限グリッドを実装しました。基本的に、プロキシはjsonpを使用してjsonファイルをフェッチし、グリッドにデータを入力します。グリッドサイズを10にし、ユーザーが10番目のレコードに近づいたときにのみプロキシが後続のリクエストを行うようにします。各レコードはグリッドビューで垂直方向に十分なスペースを取り、スクロールせずに表示できるのは約5レコードのみです（解像度が1366 x 768の14インチのラップトップの場合）。ページサイズを10に設定しましたが、表示されているレコードを超えて下にスクロールした場合にのみグリッドが更新されることを期待しています。ただし、グリッドは、スクロールしなくても5つの個別の要求を行うことにより、すべてのデータ（全部で50レコード）をロードします。コードは次のとおりです。

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.plugin.BufferedRenderer'
]);

Ext.onReady(function() {
    Ext.define('ContentModel', {
        extend : 'Ext.data.Model',
        fields : [ 'content_id', 'content' ],
        idProperty: 'content_id'
    });

    var store = Ext.create('Ext.data.Store', {
        id : 'store',
        model : 'ContentModel',
        buffered: true,
        pageSize: 10,
        proxy : {
            type : 'jsonp',
            url : 'http://website.com/Top1.json',
            reader: {
                root: 'contents',
                totalProperty: 'totalCount'
            }
        },
        autoLoad : true
    });

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo : Ext.getBody(),
        width : '100%',
        height : '100%',
        title : 'Reader Panel',
        id : 'reader',
        store : store,
        columns : [ {
            id : 'content_id',
            text : 'Content ID',
            dataIndex : 'content_id',
            width : '10%'
        },
        {
            id : 'content',
            text : 'Content',
            dataIndex : 'content',
            width : '90%'
        } ]
    });

    Ext.define('JSONP Proxy', {
        override: 'Ext.data.proxy.JsonP',
        buildUrl: function(request) {
            var me = this, url = this.getUrl(request);
            console.log(url);
            request.url = 'http://website.com/Top' + request.params.page + '.json';
            return me.callParent([request]);
        }
    });

});

そして、jsonファイルの内容は次のとおりです。

Top1.json：

Ext.data.JsonP.callback1({"totalCount":"50", "contents":[{"content_id" : 1, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 2, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 3, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 4, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 5, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 6, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 7, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 8, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 9, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"},{"content_id" : 10, "content" : "<div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br><div> Hello World 1</div><br>"}]});

他のjsonファイルは同じ形式に従い、一意のコンテンツIDを持ち、適切なコールバック（callback2、callback3、callback4、callback5）を持っています。

私がスクロールするのを待つのではなく、5つのjsonpリクエストすべてがすぐに実行される理由を誰かに教えてもらえますか？

ありがとう、プラサップ

4

3 に答える 3

2

私を正しい方向に向けてくれてありがとう。それで、これが最終的に機能したものです：

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.plugin.BufferedRenderer'
]);

Ext.onReady(function() {
    Ext.define('ContentModel', {
        extend : 'Ext.data.Model',
        fields : [ 'content_id', 'content' ],
        idProperty: 'content_id'
    });

    var store = Ext.create('Ext.data.Store', {
        id : 'store',
        model : 'ContentModel',
        buffered: true,
        pageSize: 10,
        trailingBufferZone: 5,
        leadingBufferZone: 5,
        purgePageCount: 0,
        scrollToLoadBuffer: 10,
        proxy : {
            type : 'jsonp',
            url : 'http://website.com/Top' + 0 + '.json',
            reader: {
                root: 'contents',
                totalProperty: 'totalCount'
            }
        },
        autoLoad : true
    });

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo : Ext.getBody(),
        width : '100%',
        height : '100%',
        title : 'Reader Panel',
        id : 'reader',
        store : store,
        plugins : [{
            ptype: 'bufferedrenderer',
            trailingBufferZone: 5,
            leadingBufferZone: 5,
            scrollToLoadBuffer: 10,
            onViewResize: function(view, width, height, oldWidth, oldHeight) {
                // Only process first layout (the boxready event) or height resizes.
                if (!oldHeight || height !== oldHeight) {
                    var me = this,
                        newViewSize,
                        scrollRange;

                    // View has rows, delete the rowHeight property to trigger a recalculation when scrollRange is calculated
                    if (view.all.getCount()) {
                        // We need to calculate the table size based upon the new viewport size and current row height
                        delete me.rowHeight;
                    }
                    // If no rows, continue to use the same rowHeight, and the refresh handler will call this again.

                    // Calculates scroll range. Also calculates rowHeight if we do not have an own rowHeight property.
                    // That will be the case if the view contains some rows.
                    scrollRange = me.getScrollHeight();
                    //newViewSize = Math.ceil(height / me.rowHeight) + me.trailingBufferZone + me.leadingBufferZone;
                    newViewSize = 18;
                    me.viewSize = me.setViewSize(newViewSize);
                    me.stretchView(view, scrollRange);
                }
            }
        }],
        columns : [ {
            id : 'content_id',
            text : 'Content ID',
            dataIndex : 'content_id',
            width : '10%'
        },
        {
            id : 'content',
            text : 'Content',
            dataIndex : 'content',
            width : '90%'
        } ]
    });

    Ext.define('JSONP Proxy', {
        override: 'Ext.data.proxy.JsonP',
        buildUrl: function(request) {
            var me = this, url = this.getUrl(request);
            console.log(url);
            request.url = 'http://website.com/Top' + request.params.page + '.json';
            return me.callParent([request]);
        }
    });

});

秘訣は、ストアとグリッドのbufferedrendererプラグインの両方でバッファー設定を正しく設定し、プラグインのonViewResizeメソッドをオーバーライドすることでした。bufferedrendererのViewSizeプロパティは、rowheightに基づいて計算されていました。これは、何らかの理由で常にデフォルト値の21であったため、ViewSizeは60になりました。これは、サーバー内のレコードの総数（50）よりも大きくなります。 。これにより、すべての行がすぐにフェッチされました。viewsizeプロパティを18に上書きすると、それに応じてviewsizeが変更され、最初にフェッチされたレコードは30個だけになりました。また、オンデマンドの読み込みはスクロールでも完全に機能します:)

于 2013-03-28T15:20:44.703 に答える
1

正しいレコード数を取得するには、leadingBufferZoneとtrailingBufferZoneに適切な値を設定する必要があります。

于 2013-03-28T08:07:51.170 に答える
0

bufferedconfigを使用しています。buffered有効になっている場合、ストアはデフォルトでさらに5ページをプリフェッチキャッシュにロードします。パーフェクトされたページの数を変更するには、purgePageCount構成を使用します。

于 2013-03-27T14:52:34.423 に答える