PDA

View Full Version : Triggerfield z-index problem



seldon
15 Mar 2007, 8:10 AM
Hi,

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,

Seldon

Rob_mac
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.



<html>
<head>
<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">
Ext.onReady(function(){
Ext.override(Ext.grid.PropertyColumnModel,{
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.disabled){
return;
}
if(this.dataWin === null){
this.dataWin = new Ext.Window({
title: 'Fixed Data',
width: 200,
height: 100,
modal: true
});
}
this.dataWin.show(this.el);
}
})
);
}
});

var grid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
autoHeight: true,
width: 300,
renderTo: document.body,
source: {
"Name": "Value"
}
});
});
</script>
</head>
<body>
</body>
</html>


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

Thanks

tot2ivn
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)

Totti