ExtJs Grid BufferRenderer不显示网格行

我想在我的简单网格面板中实现网格bufferrenderer，该面板使用ExtJS 4.2.1显示信息列表。没有使用bufferrenderer插件，它显示所有的数据，但是当我使用这个插件时，我的网格不包含任何数据。ExtJs Grid BufferRenderer不显示网格行

这是我的网格，而无需使用插件

enter image description here

这是通过使用插件

我网

enter image description here

网格面板中的代码是：

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)]); 
} 
});

任何人都可以帮助我吗？谢谢

来源

2013-07-26 rohan

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

高度：300

来源

2013-10-02 09:38:25 Maneshwar

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

我没有测试过，但是这样的事情应该工作：

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-02 17:23:40 user2591676

ExtJs Grid BufferRenderer不显示网格行

回答

相关问题