PDA

View Full Version : z-index issue with combobox in ToolTip?



MarkMan55
21 Mar 2011, 3:14 PM
I am trying to populate a combo box that resides within a ToolTip, but the drop down part of the combo box is not appearing when clicking on it.

Here is some test code. It has a generic combobox, which works fine, and the same combobox in a ToolTip that does not work correctly upon click.

How do I make the combobox in the ToolTip display correctly when clicked?

thanks!


<html>
<head>
<title>Test Page</title>

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

<script>


var g_overlayBaseHeight = 450; // 450
var g_overlayFormHeight = g_overlayBaseHeight - 95; // 355
var g_overlayTabHeight = g_overlayFormHeight - 38; // 317

Ext.onReady(function(){

setToolTip("testDiv", 0, 0, "Joe");
//setToolTipContent("testDiv");
renderPlainCombo();

});


function setToolTip(id, xOffset, yOffset, indexText) {


tempTitle = "Open a request for " + indexText;

g_tempTip = new Ext.ToolTip({
title: tempTitle,
//id: 'content-anchor-tip', // remove id attribute if re-using or creating new, otherwise weird UI behavior
target: id,
anchor: 'right',
customPos: true,
customX: xOffset,
customY: yOffset,
width: 450,
height: g_overlayBaseHeight,
autoHide: false,
closable: true,
listeners: { 'afterrender': function() { setTimeout(function() {setToolTipContent(tempDivId);}, 100 ); } } // still need timeout :-(
});
var tempDivId = "content";
g_tempTip.html = '<div style="height: 5px"></div><hr style="padding: 0; margin: 0;" /><div id="' + tempDivId + '" style="padding: 10px 0;"></div>'
g_tempTip.show();

}


function setToolTipContent(divId) {

testStore = new Ext.data.ArrayStore({
fields: ['abbr', 'state', 'nick'],
data: [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State']
]
});


var tabs = new Ext.FormPanel({

labelWidth: 100,
border: false,
header: false,
bodyStyle : {width:"auto", backgroundColor:"transparent"},
//defaults: { },
height: g_overlayFormHeight,

items: {
xtype:'tabpanel',
activeTab: 0,
plain: true,
height: g_overlayTabHeight,
defaults:{ bodyStyle:'padding:10px' },
items:[{
title:'Info1',
layout:'form',
//defaults: {width: 230},
defaultType: 'textfield',
labelAlign: 'top',

items: [{
fieldLabel: 'Summary',
name: 'problemSummary',
allowBlank: false,
width: '100%'
//tpl: '<div style="color: red;">{0}</div><div>{1}</div>'
//value: 'Jack'
},{
fieldLabel: 'Description',
name: 'detailedDescription',
xtype: 'textarea',
allowBlank: false,
width: '100%'
//value: 'Slocum'
},{
fieldLabel: 'Misc',
name: 'errorCodes',
labelStyle: 'float: left; margin-top: 4px;'
//value: 'Ext JS'
},{
xtype: 'combo',
style: {
zIndex: '33333333'
},
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
//applyTo: 'local-states',
store: testStore
}]
},{
title:'Personal Info',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
labelAlign: 'top',

items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
title:'Other Info',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
labelAlign: 'top',

items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
},

buttons: [{
text: 'Submit'
}]
});

tabs.render(divId);

}

function renderPlainCombo() {

testStore = new Ext.data.ArrayStore({
fields: ['abbr', 'state', 'nick'],
data: [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State']
]
});

var combo = new Ext.form.ComboBox({

displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
store: testStore
});

combo.render("testDiv2");

}


</script>


</head>
<body>


<div id="testDiv" style="width: 200px">&nbsp;</div>
<div id="testDiv2"></div>


</body>
</html>

<edited 3/22/2011>

************************
******* SOLVED **********
************************

combobox's "getParentZIndex" method was returning NaN, so I had to override the "expand" method to force a higher z-index.

This thread pointed me in the right direction:
http://www.sencha.com/forum/showthread.php?16327-z-index-of-ComboBox-list-vs-z-index-of-Ext.menu.Menu