Ext3.3 在ie6上的诡异问题1：点击查询,或者随便弹出Ext.MessageBox.alert()后,下拉菜单的键头会移到左边...

最新推荐文章于 2021-10-22 15:06:08 发布

最新推荐文章于 2021-10-22 15:06:08 发布 · 145 阅读

文章标签：

#ext #ie6 #ie兼容问题 #诡异 #奇怪

js 同时被 3 个专栏收录

27 篇文章

订阅专栏

extjs

4 篇文章

订阅专栏

ext

3 篇文章

订阅专栏

本文解决了一个使用Ext3.3框架在IE6浏览器上遇到的下拉菜单键头移位问题。通过分析容器面板的布局属性，发现问题源于额外的未指定布局容器。解决方案是简化容器布局定义，从而解决问题。

Ext3.3 在ie6上的诡异问题1：点击查询,或者随便弹出Ext.MessageBox.alert()后,下拉菜单的键头会移到左边

修改前代码：

/***********************************************************************
 * 容器panel定义（在容器containerPanel的items中多了层么有指定layout的容器，来盛放infoForm等元素）
 ***********************************************************************/
var containerPanel = new Ext.Panel({
	layout : 'column',
	border : false,
	frame : true,
	applyTo : 'app_main_panel_'+tabPanelIndex,
	id : 'containerPanel_'+tabPanelIndex,
	bodyStyle : 'padding:0px 0px 0px 0px',
	width : talksWidth,
	height : talksHeigth,
	items : [
		   {    id:"formsPanel_"+tabPanelIndex,
				columnWidth : 1,
				items :[
					{
						columnWidth : 1,
						items : infoForm
					}, {
						columnWidth : 1,
						items : [resultForm]
					}, {
						columnWidth : 1,
						items : [detailForm]
					}]
			}]
});

修改后：

/***********************************************************************
 * 容器panel定义（去掉了那么多一层的，问题解决）
 **********************************************************************/
var talksWidth=document.body.clientWidth-663;
var talksHeigth=document.body.clientHeight-455;

var containerPanel = new Ext.Panel({
	layout : 'column',
	border : false,
	frame : true,
	applyTo : 'app_main_panel_'+tabPanelIndex,
	id : 'containerPanel_'+tabPanelIndex,
	bodyStyle : 'padding:0px 0px 0px 0px',
	width : talksWidth,
	height : talksHeigth,
	items : [
			{
				columnWidth : 1,
				items : infoForm
			}, {
				columnWidth : 1,
				items : [resultForm]
			}, {
				columnWidth : 1,
				items : [detailForm]
			}
		   ]
});

总结: Ext3.3在ie6上出现的各种诡异好多都容器的layout属性有关系，出现类似的问题可以定位元素后后一步一步向外层找外部容器是不是指定了layout属性

参考： Ext3.3 在ie6上的诡异问题2:gird 中bbar中定义的按钮诡异消失