Ext Grid宽度自适应

最新推荐文章于 2018-08-29 15:43:40 发布

iteye_21082

最新推荐文章于 2018-08-29 15:43:40 发布

阅读量545

点赞数

CC 4.0 BY-SA版权

分类专栏： EXTJS 3.4 文章标签： javascript java ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_21082/article/details/82447485

EXTJS 3.4 专栏收录该内容

7 篇文章

订阅专栏

我们使用Ext的Grid的时候，在改变浏览器宽度时，需要Grid也相应的改变其宽度，以便能够Grid宽度自适应。

那么我们可以注册window.onresize函数进行相应。但是如果用户把浏览器宽度拉得很小的时候，就可能显示不清楚了，所以我们还可以设置一个最小宽度，以保证列内容能大致看清楚。浏览器小于这个宽度的话，Grid最小就是这个宽度了并出现水平滚动条。

页面布局如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    var __path = '<%=path%>';
	Ext.BLANK_IMAGE_URL = __path + '/styles/images/s.gif';
</script>

<script type="text/javascript" src="<%=path%>/test.js"></script>
<title></title>
</head>
<body>
	<div id="grid-div">
		<div id="grid"></div>
	</div>
</body>
</html>

代码如下：

Ext.onReady(function() {
	//你的逻辑
	//...
	
	//响应窗口大小变化
	window.onresize=resizeWindowListener;
});


function resizeWindowListener() {

	var grid = Ext.getCmp("grid");

	// 获得当前列的显示列数量
	var columns = grid.getColumnModel().getColumnCount(true);

	grid.setWidth(0);

	// 如果超过了最小显示宽度，则自适应与外部宽度一致
	if (Ext.get("grid-div").getWidth() > columns * 80) {
		//将grid的宽度设置为grid的父容器的大小
		grid.setWidth(Ext.get("grid-div").getWidth());
	}
        else
        {
            // 最小宽度设为显示列数*80
            grid.setWidth(columns * 80);
        }        
}

//或者：
//宽度自适应,当小于最小宽度时不再缩小
	Ext.EventManager.onWindowResize(function(width,height)
	{
		var sidWidth = grid.getColumnModel().getColumnCount(true)*100;
		grid.setWidth(sidWidth);
		if(Ext.get("grid-div").getWidth()>sidWidth)
		{
			grid.setWidth(Ext.get("grid-div").getWidth());
		}
    });