ExtJS4 无限滚动表格

最新推荐文章于 2021-09-06 16:24:23 发布

fengbaoxp

最新推荐文章于 2021-09-06 16:24:23 发布

阅读量2.2k

点赞数

分类专栏： Ext JS 文章标签： extjs header flex email layout border

本文链接：https://blog.csdn.net/fengbaoxp/article/details/6729524

版权

Ext JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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',
		align : 'left',
		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', {
	extend : 'Ext.grid.Panel',
	alias : 'widget.userlist',

	store : 'Users',

	region : 'center',
	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',
		align : 'left',
		flex : 1
	}, {
		header : 'Email',
		dataIndex : 'email',
		flex : 1
	} ],

	initComponent : function() {
		this.callParent(arguments);
	}
});

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