ext4.0这个BUG如何修改?

ext我用的是4.0,旧版本3.0没有这个问题.
我在一个强出的Window窗体中,加载fckeditor编辑器,当然可以正常的显示出来了,但是我选择图片上传那个工具条时,强出的浏览图片的那个对话框没在Window窗体的前面!即躺在了Window窗体后面去了,相当于被窗体给覆盖掉了!这显然是不行的,这个问题,怎么解决呢?才能做点工具栏时,弹出的窗永远在最前面?
可能说得有点抽象,下面,我弄截图上面。

下面再说下,我自己的解决方法与思路,只是没效果,请大虾们指教。

这种情况下,我们肯定会想到,是z-index的问题,于是,我重新设制了强出的Window窗体的z-index,方法如下:
fckWindow.getEl().setStyle("z-index", "19000");//我这里值改为19000,没效果,我改成其它任意的值,也没效果,为何?

另一种方法,我想到,去改ext-all.css里面的相关的z-index值,我特意把里面,所有的关于z-index设置的样式都找出来了,如下:
.x-focus-frame {
position: absolute;
left: 0px;
top: 0px;
z-index: 100000000;
width: 0px;
height: 0px
}

.x-mask {
z-index: 100;
position: absolute;
top: 0;
left: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid : DXImageTransform.Microsoft.Alpha ( Opacity = 50 );
opacity: 0.5;
width: 100%;
height: 100%;
zoom: 1;
background: #cccccc
}

.x-mask-msg {
z-index: 20001;
position: absolute;
top: 0;
left: 0;
padding: 2px;
border: 1px solid;
border-color: #99bce8;
background-image: none;
background-color: #dfe9f6
}

.x-menu-icon-separator {
position: absolute;
top: 0px;
left: 27px;
z-index: 0;
border-left: solid 1px #e0e0e0;
background-color: white;
width: 2px;
height: 100%;
overflow: hidden
}

.x-menu-item {
white-space: nowrap;
overflow: hidden;
z-index: 1
}

.x-column-header-trigger {
display: none;
height: 100%;
width: 14px;
background: no-repeat left center;
background-color: #c3daf9;
background-image:
url('../../resources/themes/images/default/grid/grid3-hd-btn.gif');
position: absolute;
right: 0;
top: 0;
z-index: 2;
cursor: pointer
}

.x-grid-resize-marker {
position: absolute;
z-index: 5;
top: 0;
width: 1px;
background-color: #0f0f0f
}

.col-move-top,.col-move-bottom {
width: 9px;
height: 9px;
position: absolute;
top: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
z-index: 20000;
background: no-repeat left top transparent
}

.x-grid-row-editor {
position: absolute !important;
z-index: 1;
zoom: 1;
overflow: visible !important
}

.x-form-item-label {
float: left;
padding: 3px 0 0;
z-index: 2;
position: relative;
font-size: 12px;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: ignore;
cursor: default
}

.x-tab-bar-body {
border-style: solid;
border-color: #99bce8;
position: relative;
z-index: 2;
zoom: 1
}

.x-tab-bar-strip-default,.x-tab-bar-strip-default-plain {
font-size: 0;
line-height: 0;
position: absolute;
z-index: 1;
border-style: solid;
overflow: hidden;
border-color: #99bce8;
background-color: #deecfd;
zoom: 1
}

.x-tab {
z-index: 1;
margin: 0 0 0 2px;
display: inline-block;
zoom: 1; *
display: inline;
white-space: nowrap;
height: 20px;
border-color: #8db3e3;
cursor: pointer;
cursor: hand
}

.x-tab-active {
z-index: 3
}

.x-dd-drop-icon {
position: absolute;
top: 3px;
left: 3px;
display: block;
width: 16px;
height: 16px;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
z-index: 1
}

.x-resizable-handle {
position: absolute;
z-index: 100;
font-size: 1px;
line-height: 6px;
overflow: hidden;
zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid : DXImageTransform.Microsoft.Alpha ( Opacity = 0 );
opacity: 0;
background-color: #fff
}

.x-resizable-handle-southeast {
width: 6px;
height: 6px;
right: 0;
bottom: 0;
z-index: 101
}

.x-resizable-handle-northwest {
width: 6px;
height: 6px;
left: 0;
top: 0;
z-index: 101
}

.x-resizable-handle-northeast {
width: 6px;
height: 6px;
right: 0;
top: 0;
z-index: 101
}

.x-resizable-handle-southwest {
width: 6px;
height: 6px;
left: 0;
bottom: 0;
z-index: 101
}

.x-resizable-proxy {
border: 1px dashed #3b5a82;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
z-index: 50000
}

.x-resizable-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
z-index: 200000;
background-color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid : DXImageTransform.Microsoft.Alpha ( Opacity = 0 );
opacity: 0
}

.x-splitter-active {
z-index: 4;
font-size: 1px;
background-color: #b4b4b4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: progid : DXImageTransform.Microsoft.Alpha ( Opacity = 80 );
opacity: 0.8
}

.x-docked {
position: absolute;
z-index: 1
}

.x-border-region-slide-in {
z-index: 5
}

.x-region-collapsed-placeholder {
z-index: 4
}

.x-box-scroller-left {
float: left;
height: 100%;
z-index: 5
}

.x-box-scroller-right {
float: right;
height: 100%;
z-index: 5
}

只是,见鬼的是,里面的z-index的值,我怎么改变,都没效果!实在想不出还有什么好办法解决的了,请大虾们指点下吧,先谢了。

[img]http://dl.iteye.com/upload/attachment/556222/a90562a6-b579-35c3-a15f-2d32fac16f01.png[/img]

3个回答

之前没注意,你用的是CKEditor,这并不算ExtJs的bug,因为人家就没说过兼容CKEditor。
CKEditor的弹出窗口与ExtJs的并不是一个体系,有问题很正常。

这里有个临时解决方案,Ext4.0中的Window默认使用的z-index为19000,而CKEditor的z-index大多在10000左右,而Ext有接口可以修改window的z-index:
[code="js"]
Ext.WindowManager.setBase(5000);
[/code]

为什么不用firebug之类的工具看看html结构呢?看它们真实的z-index是什么,是不是处于body节点下

没什么不好判断的吧,firebug之类的工具(包括IE Developer Tools、Chrome自带开发人员工具)都有功能可以直接在界面上点击来选择对应的html节点,看看结构及css什么的几乎无难度。
你说的bug,有可能只是一个问题引发的,改一个就全都改好了。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问