View Full Version : Triggerfield z-index problem

15 Mar 2007, 8:10 AM

I extended the triggerField to show a dialog with grid upon clicking the trigger. Now all works fine, even the returning of the value of hte selected grid row back into the field. However one problem occurs, the editfield remains on top of the dialog and I cant seem to prevent this. I tried setting a higher z-index on the dialog, but to no avail. Any idea how to make sure the dialog is on top of the editfield?

I think its the layer element of the editor (im having a propsgrid) that is trying to stay on top. But since there is not reference to the editor from the field object im not sure how to make it work. If i just let the editor complete the edit as soon as the dialog is opened, i could try to set the value after the user closes the dialog, but again i dont seem to have any reference to the original grid cell from within my field.

Any help is much appreciated!

Thanks already,


22 Oct 2009, 1:20 AM
I realise this thread is quite old now, but I too have just come across the same problem, using Ext 2.2, and was wondering if anyone had any ideas on how to resolve this.

I am creating a new triggerfield that displays a modal window when the trigger is clicked. On IE8 it works fine in that the trigger field is behind the mask that gets applied when the window is shown. On Firefox 3, however, the trigger field sits on top of the mask and is therefore still active.

Please find the code below for a quick property grid example that shows the problem.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Trigger Field Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

<script type="text/javascript">
getCellEditor : function(colIndex, rowIndex){
return new Ext.grid.GridEditor(
new Ext.form.TriggerField({
selectOnFocus: true,
dataWin: null,
invalidText : "{0} is not valid - it must be an array",
onTriggerClick : function(){
if(this.dataWin === null){
this.dataWin = new Ext.Window({
title: 'Fixed Data',
width: 200,
height: 100,
modal: true

var grid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
autoHeight: true,
width: 300,
renderTo: document.body,
source: {
"Name": "Value"

Any ideas would be greatfully received as bit stuck on how to resolve this.


25 Mar 2010, 6:50 PM
Experiencing the same thing. What you can do is set your

new Ext.form.TriggerField({
ctCls : 'x-lower-z-order' // my case 5000

and in your CSS, specify:

.x-lower-z-order: {
z-index: 5000 !important;

Cheers, ~o)