我们使用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());
}
});
相关推荐
在探讨“Ext Grid表格的自动宽度及高度的实现”这一主题时，我们深入解析如何在Ext JS框架下，利用其强大的Grid组件自适应容器尺寸，实现表格宽度与高度的自动调整。这一技术对于构建响应式、用户友好的界面至关重要...
2. **动态调整列宽**: 这一特性允许用户根据需要自适应地调整列的宽度。用户可以通过拖动列头来改变某一列的宽度，提高用户体验，使数据视图更加符合个人需求。 3. **列顺序调整**: EXT Grid 2.0支持列的重新排列，...
25. `viewConfig`：自定义视图配置，如`forceFit`，用于使所有列自适应宽度。 26. `sortable`：实现列的排序功能。 27. `sortInfo`：用于解决中文排序问题，需要自定义`applySort`函数。 在处理数据排序时，可以...
- 在进行Grid的配置时，应确保相关的尺寸设置不会阻止Grid的自适应行为，如使用`autoWidth:true`和`autoHeight:true`选项来允许Grid根据内容自适应宽度和高度。 - 有时候，直接刷新Grid视图可能会导致一些性能问题，...
var grid = new Ext.grid.GridPanel({ autoHeight: true, store: store, sm: sm, cm: cm, id: 'grid', viewConfig: { forceFit: true }, bbar: new Ext.PagingToolbar({ pageSize: 5, store: store, ...
EXTDRID（可能是EXTGRID的拼写错误）是指EXTJS中的Grid Panel，它允许开发者构建灵活、可配置的数据视图，适用于大量结构化数据的展示。在EXTJS中，动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图，以...
flex: 1, // 自适应宽度 dataIndex: 'name' }, { xtype: 'column', // 第二列 text: '联系方式', width: 200, // 固定宽度 items: [{ // 内嵌的子列 text: '邮箱', dataIndex: 'email' }, { text: '电话'...
10. **响应式布局（Responsive Layout）**：在ExtJS 5.1中，你可以利用Ext.container.Viewport和Ext.resizer.Splitter等组件，实现Grid在不同屏幕尺寸下的自适应布局。 11. **主题（Theme）**：ExtJS提供多种视觉...
9.5.2 Ext.grid.GroupingView的配置操作 9.6 可拖放的表格 9.6.1 拖放改变表格的大小 9.6.2 在同一个表格里拖放 9.6.3 表格之间的拖放 9.6.4 表格与树之间的拖放 第10章 设计树状结构布局 10.1 TreePanel的...
5.2.2 Fit自适应布局 5.2.3 Accordion折叠布局 5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute绝对位置布局 5.2.7 CheckboxGroup复选框组布局 5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0...
9.5.2 Ext.grid.GroupingView的配置操作 9.6 可拖放的表格 9.6.1 拖放改变表格的大小 9.6.2 在同一个表格里拖放 9.6.3 表格之间的拖放 9.6.4 表格与树之间的拖放 第10章 设计树状结构布局 10.1 TreePanel的...
#### 一、EXTJS_GridPanel_ColumnModel_列的宽度自适应数据长度 在ExtJs开发中，特别是在处理`GridPanel`时，如何使列的宽度根据数据长度动态调整是一个常见的需求。传统的做法是手动设置列宽，但这在数据长度不一...
最后，确保`GridPanel`的视图配置`viewConfig`适合整个容器，例如通过设置`forceFit: true`来使列自适应宽度。 总结起来，`Ext.data.PagingMemoryProxy`是一个高效的方法，用于在前端一次性加载所有数据并进行分页...
-修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件（比如Panel,Region,Tab等）增加AJAX...
例如，在开发过程中，当需要一个窗口或者面板内的Grid组件随着窗口大小的变化而自适应调整时，Fit布局就显得非常有用。 #### 2. 特点 - **子元素自动填充**：在Fit布局中，子元素会自动扩展到父容器的宽度和高度，...
2. **尺寸配置**：`autoWidth`和`autoHeight`属性分别可以让Panel宽度和高度自适应，当这些属性设置为`true`时，Panel会根据其父容器的尺寸自动调整大小。 3. **事件监听**：可能需要监听窗口或容器的resize事件，...
如果GridPanel是自适应高度的（`g.autoHeight`），则调整内部头部（`innerHd`）的宽度与视口宽度相同。 3. **固定列宽和自动扩展**： 对于非自适应高度的情况，调整GridPanel本身以及滚动条的大小。然后，如果启用...
-修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件（比如Panel,Region,Tab等）增加AJAX...
1. Flexigrid：这是个类似于ExtGrid的jQuery表格控件，具备调整列宽、合并列标题、分页、排序、显示/隐藏表格等功能。Flexigrid可以使用Ajax获取数据或转换普通表格。 2. Yahoo! UI Library: DataTable：此控件提供...