ExtJs Grid Buffer Renderer 不显示网格行

Posted 2023-02-26

【中文标题】ExtJs Grid Buffer Renderer 不显示网格行

【英文标题】：ExtJs Grid BufferRenderer doesnot display the grid rows

【发布时间】：2013-07-26 07:18:09

【问题描述】：

我想在我的简单网格面板中实现网格 bufferrenderer，它使用 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)]);

);

谁能帮我解决这个问题？谢谢

【参考方案1】：

在网格中设置高度属性将解决此问题。

身高：300

【参考方案2】：

确保直到视口的所有面板都将其布局设置为“适合”。此外，网格的区域应该是“中心”。

我还没有测试过，但是这样的东西应该可以工作：

var grid = Ext.create('MyApp.view.MyPanel', 
     layout: 'fit',
     region: 'center'
     );
var viewport = Ext.create('Ext.container.Viewport', 
        renderTo: Ext.getBody(),
        items: [
            grid
            ]
        );