我们使用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()); } });