2

ExtJS 4.2.1 を使用して、情報のリストを表示する単純なグリッド パネルにグリッド バッファレンダラーを実装したいと考えています。bufferrenderer プラグインを使用しないと、すべてのデータが表示されますが、このプラグインを使用すると、グリッドにデータが含まれません。

これはプラグインを使用しない私のグリッドです

ここに画像の説明を入力

これはプラグインを使用した私のグリッドです

ここに画像の説明を入力

グリッド パネルのコードは次のとおりです。

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
itemId: 'myPanel',
title: '',
requires: ['Ext.grid.plugin.BufferedRenderer'],
initComponent: function() {
    var me = this;
    Ext.applyIf(me, {
        items: [
            {
                xtype: 'gridpanel',
                autoRender: true,
                autoShow: true,
                itemId: 'gridPanel',
                title: 'My Grid Panel',
                store: 'MyJsonStore',
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'id',
                        text: 'Id'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'firstName',
                        text: 'FirstName'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'middleName',
                        text: 'MiddleName'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'lastName',
                        text: 'LastName'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'age',
                        text: 'Age'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'country',
                        text: 'Country'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'city',
                        text: 'City'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'street',
                        text: 'Street'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'mobile',
                        text: 'Mobile'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'phone',
                        text: 'Phone'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'zip',
                        text: 'Zip'
                    }
                ],
                plugins: 'bufferedrenderer'
                /*plugins:  {
                    ptype: 'bufferedrenderer',
                    trailingBufferZone: 20,  
                    leadingBufferZone: 25  
                }*/
            }
        ]
    });

    me.callParent(arguments);
}

});

ストアのコードは次のとおりです。

Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',

requires: [
    'MyApp.model.GridModel'
],

constructor: function(cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        autoLoad: true,
        model: 'MyApp.model.GridModel',
        storeId: 'MyJsonStore',
        buffered: true,
        clearOnPageLoad: false,
        clearRemovedOnLoad: false,
        leadingBufferZone: 25,
        pageSize: 500,
        purgePageCount: 10,
        trailingBufferZone: 20,
        proxy: {
            type: 'ajax',
            url: 'data/users.json',
            reader: {
                type: 'json',
                root: 'users',
                totalProperty: 'total_user'
            }
        }
    }, cfg)]);
}
});

誰でもこれで私を助けることができますか？ありがとう

4

2 に答える 2

2

グリッドで高さプロパティを設定すると、この問題が修正されます。

高さ: 300

于 2013-10-02T09:38:25.550 に答える
1

ビューポートまでのすべてのパネルのレイアウトが「フィット」に設定されていることを確認してください。また、グリッドの領域は「中央」にする必要があります。

私はテストしていませんが、次のようなものが動作するはずです:

var grid = Ext.create('MyApp.view.MyPanel', {
     layout: 'fit',
     region: 'center'
     });
var viewport = Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        items: [
            grid
            ]
        });
于 2014-01-02T17:23:40.827 に答える