【Ext3.1.1】关于GridPanel宽度自适应的几个方案

测试环境： Extjs3.1.1 + IE8

测试代码：

/*store之类的就省略了*/

var sm = new Ext.grid.CheckboxSelectionModel({
	handleMouseDown : function(){}
});

var gridColumn = new Ext.grid.ColumnModel([
	sm,
	{header:'地市',dataIndex:'areaName',width:200},
	{header:'品牌',dataIndex:'brandName',width:200},
	{header:'指标',dataIndex:'busiTypeName',width:200},
	{header:'1日',dataIndex:'day1',width:200},
	{header:'2日',dataIndex:'day2',width:200},
	{header:'3日',dataIndex:'day3',width:200},
	{header:'4日',dataIndex:'day4',width:200},
	{header:'5日',dataIndex:'day5',width:200}
]);

var gridPanel = new Ext.grid.GridPanel({
	id: 'gridPanelId',
	cm: gridColumn,
	sm: sm,
	ds: gridStore,
	frame: true,
	autoScroll: true,
	height: 550,
	tbar: topToolbar,
	bbar: new Ext.PagingToolbar({
		id: 'pagingToolbarId',
		store: gridStore,
		displayInfo: true, 
		pageSize: 10
	})
});

var linePanel = new Ext.Panel({
	id: 'linePanelId',
	frame: true,
	contentEl: 'myChartId',
	height: 550
});

var backPanel = new Ext.Panel({
	id: 'backPanelId',
	frame: true,
	autoScroll: true,
	items: [gridPanel, linePanel]
});

new Ext.Viewport({
	layout: 'fit',
	items: backPanel
});

 

原始效果图：

 

1.修改样式表： http://www.iteye.com/topic/244973

结果：没任何效果

 

2.修改布局为'anchor'：http://www.iteye.com/topic/244973?page=2#977202

注意：不要设置viewConfig: {forceFit: true}，这个是把列宽(即ColumnModel的宽度)设置为自动宽度，不是整个GridPanel的宽度。

结果：超出屏幕的部分会被截掉，页面没有水平滚动条，导致无法看到被截掉的部分。不过在FF里可以得到正确的效果，但仅限于初始化页面时。问题在于如果你的打开当前页面时浏览器窗口不是最大化状态，就会看到一个有趣的效果，GridPanel内表格的宽度为页面初始宽度，当你把页面最大化时，GridPanel宽度却不会跟着改变，直到页面刷新。

 

3.动态给GridPanel的宽度赋值：http://www.iteye.com/topic/244973#692945

结果：这是目前我所尝试的所有方法中最为可行的(仅针对IE而言，要不方法4才是最好的解决方案)，而且也不需要把GridPanel  render到DIV中。唯一需要注意的，DIV的宽度把垂直滚动条的宽度也包含在内，如果你的页面有垂直滚动条，就必须减去滚动条的宽度。

 

4.修改布局为'fit'：http://www.iteye.com/topic/153023#441966

结果：当布局容器里只存在一个GridPanel时，GridPanel的自适应问题可以完美解决，可惜多数时时候布局里不可能只存在一个GirdPanel……当然，可以采用布局嵌套的方式，让一个布局里只包含一个GridPanel，具体范例可以参数官方范例examples\forum\forum.html 或者这位朋友引用的例子http://www.iteye.com/topic/153023?page=3#628417。

补充：官方与那位朋友的例子都是用border嵌套fit，这样做有一个不好的地方就是，整个页面的最高和最宽都被限定在一个屏幕范围内。如果用panel嵌套fit，就可以使整个页面的高度超过屏幕，不过这样做的话，IE8无法全自适应（FF中没问题）。当页面从大变小时，GridPanel的宽度不会改变，反过来却可以自适应页面。另外需要注意的是，使用panel嵌套fit时，GridPanel要添加配置项 bodyStyle: 'width:100%' ，否则依然会超屏。

 

5.添加配置项 bodyStyle: 'width: 100%'：http://www.iteye.com/topic/153023?page=2#445479

或者指定width的值为 Ext.get("divname").getWidth()：http://www.iteye.com/topic/153023#441865

结果：上面两个方法效果一样，页面初始化时看起来还不错，如果你的页面没有垂直滚动条的话。但是依然不能自适应，原因就是这个 http://www.iteye.com/topic/153023?page=2#442557

需要特别说明的是，该方法在ext2.2中有完美的效果，不知为啥3.X版本就不行了。

 

 

 

另外有个不是问题的问题：如果页面有其它固定宽度的元素而GridPanel的宽度自适应，当浏览器窗口缩小到比那些元素的宽度更小时就会出现水平滚动条，把水平滚动条拖到最右就可以看到GirdPanel的右边有大量的空白页面。解决方法就是不要把那些大的并且有固定宽度的元素跟需要宽度自适应的GridPanel放在一个页面，或者动态调整这些元素的位置使水平滚动条不要出现。