ExtJS4 无限滚动表格

ExtJS4提供了无限滚动表格，就是通过滚动条来实现分页的表格，根据extjs自带的例子，实现了自己的无限分页表格，代码如下：

Ext.define('Gigi.view.user.List',{
	extend : 'Ext.grid.Panel',alias : 'widget.userlist',store : 'Users',width :900,height : 800,title : '用户管理',verticalScrollerType: 'paginggridscroller',invalidateScrollerOnRefresh : false,loadMask : true,disableSelection : false,dockedItems : [ {
		xtype : 'toolbar',items : [ {
			text : '新增',itemId : 'add'
		},{
			text : '删除',itemId : 'delete'
		},{
			text : '修改',itemId : 'update'
		} ]
	}],columns : [ {
		xtype : 'rownumberer',width : 30,align : 'left',sortable : false
	},{
		header : '用户名',dataIndex : 'username',flex : 1
	},{
		header : 'Email',dataIndex : 'email',flex : 1
	} ],initComponent : function() {
		this.callParent(arguments);
	}
});

上面的grid可以正常显示，拉动滚动条也能实现数据动态加载，但是上面的表格是指定大小的，不能自适应屏幕。为了自适应屏幕，去掉了grid中的width和height配置声明，并将grid嵌入到了Viewport中，代码如下：

Ext.create('Ext.container.Viewport',{
			layout : 'fit',items : [ {
				xtype : 'userlist'
			} ]
		});

表格也能正常显示，可是拉动滚动条却不能动态加载表格数据，表格内容始终保持不变。后来在grid中加入region : 'center'配置项，并将Viewport的layout改为border问题解决。最后代码如下：

Ext.define('Gigi.view.user.List',region : 'center',initComponent : function() {
		this.callParent(arguments);
	}
});

	Ext.create('Ext.container.Viewport',{
			layout : 'border',items : [ {
				xtype : 'userlist'
			} ]
		});