PDA

View Full Version : Mask zIndexing issues



Jangla
30 Apr 2013, 1:55 AM
I'm using the fieldTip override to allow tooltips to be shown on fields when focussed (why this isn't a standard feature in Ext yet, I've no idea) and while it largely operates ok (aside from the fact that you can't tab between fields properly but that's for another thread), there's an issue with the way Ext is managing zIndexes.

The two attached screenshots show two distinctly different states of the tooltip. The one where it's visible is 'normal operation' - the user clicks into the field itself and sees the tip.

The second screenshot is what happens when the user clicks the trigger on the combo box. Ext considers the field to have focus and therefore shows the tooltip but for some reason, completely stuffs up the zindex and shows it below the modal window the combo box is actually in. The only reason I've recently found this was because I recently styled up this semi-transparent window UI.

So, is there any decent resources around on how we can better manage zIndexes on Ext controls? Is there a way of addressing the issue?

Here's the field tip code:




Ext.define( 'Ext.ux.form.FieldTip', {
extend : Object,
alias : 'plugin.fieldtip',
init : function ( field ){
field.on( {
focus : function (){
if ( !this.tip && this.qtip ) {
var tipCfg = {
autoHide : false,
anchorToTarget : true,
constrainPosition : false,
floating : true,
anchor : this.qanchor,
shadow : false,
anchorOffset : 8,
defaultAlign : 'c'
};
if ( Ext.isString( this.qtip ) ) {
tipCfg.html = this.qtip;
} else {
tipCfg.html = this.qtip.text;
Ext.apply( tipCfg, this.qtip );
}
this.tip = new Ext.ToolTip( tipCfg );
this.tip.target = this.tip.anchorTarget = this.el;
}
if ( this.qtip && this.qtip.text ) {
this.tip.show();
}
},
blur : function (){


if ( this.qtip && this.tip ) {
this.tip.hide();
}


},
destroy : function (){
if ( this.qtip && this.tip ) {
this.tip.destroy();
delete this.tip;
}
}
} );
}
} );





and here's an example of how it might be used on a combo:




...
{
xtype : 'combo',
fieldLabel : 'My Combo',
store : comboStore,
name : 'myField',
width : 300,
valueField : 'myValueField',
displayField : 'myNameField',
qanchor : 'left',
plugins : ['fieldtip']
},
...

slemmon
1 May 2013, 2:59 PM
Have you looked to see how the Button class manages setting a tooltip on the button element and borrow code from it?

Jangla
17 May 2013, 5:22 AM
Have you looked to see how the Button class manages setting a tooltip on the button element and borrow code from it?

No I hadn't thought of that as I wasn't dealing with buttons but I'm open to all suggestions :D