PDA

View Full Version : [FIXED-554] Combo box list appears in background



mynameisyoda
10 Feb 2010, 9:34 AM
Ext version tested:


Ext 3.1/3.1.1



Adapter used:


ext



css used:


only default ext-all.css





Browser versions tested against:


IE7
FF3.5.7 (firebug 1.5 installed)
Safari 4.0.4



Operating System:


Mac OX X 10.4.11
WinXP Pro



Description:


A panel contains buttons to show more than one floating window
Windows contain form with combo box.
List of values of Combo box included in floating windows appears in background after the firs time that they are displayed.



Test Case:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->


<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>


<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){

var addWindow=new Ext.Window({
title: 'Add window',
width:260,
height:100,
closable: true,
closeAction: 'hide',
items:[{
xtype: 'form',
frame: true,
items: [{
xtype: 'combo',
fieldLabel: 'Add combo',
width:100,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [[1, 'item1'], [2, 'item2'],[3, 'item3'],[4, 'item4'],[5, 'item5'],[6, 'item6']]
}),
valueField: 'myId',
displayField: 'displayText'
}]
}],
buttons:[{
text: 'Cancel',
handler: function(){
addWindow.hide();
}
}]
});

var editWindow = new Ext.Window({
title: 'Edit window',
width:260,
height:100,
closable: true,
closeAction: 'hide',
border:false,
items:[{
xtype: 'form',
frame: true,
items: [{
xtype: 'combo',
width:100,
fieldLabel: 'Edit combo',
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 1,
fields: [
'myId2',
'displayText2'
],
data: [[1, 'item1'], [2, 'item2'],[3, 'item3'],[4, 'item4'],[5, 'item5'],[6, 'item6']]
}),
valueField: 'myId2',
displayField: 'displayText2'
}]
}],
buttons:[{
text: 'cancel',
handler: function(){
editWindow.hide();
}
}]
});


var simple = new Ext.Panel({
frame:true,
title: 'Simple panel',
bodyStyle:'padding:5px 5px 0',
width: 600,
height: 400,
items:[{
xtype:'button',
text: 'Add',
width:60,
handler: function() {
addWindow.show();
}
},{
xtype:'button',
text: 'Edit',
width:60,
handler: function(){
editWindow.show();
}
}]
});

simple.render(document.body);
});//end onReady
</script>

</head>
<body>
</body>
</html>
Steps to reproduce the problem:


open the first window, display the value list
open the second window, display the value list
in the first window, display the value list again


Screenshot or Video:


attached



Debugging already done:


The same code with ext-3.0.3 works fine!!!!



Possible fix:


no idea...:(

ChrisSmeets
10 Feb 2010, 12:41 PM
Hello guys,

I have the same problems here. I have implemented some Form windows, including several comboboxes.

I tested it with version 3.0 and version 3.1.1. The main difference is the z-index. In version 3.0 the combobox list has a z-index of 11000 and in 3.1.1 an index of 3.
If I restore the number manually, using Firebug, the list works fine.

Clearly something is wrong with the z-indexing somehow. But I'm just a rookie. Some help of experts is needed....

In 3.0

<div id="ext-gen784" class="x-layer x-combo-list " style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; width: 298px; height: 100px; font-size: 12px;">In 3.1.1

<div id="ext-gen990" class="x-layer x-combo-list " style="position: absolute; z-index: 3; visibility: hidden; left: -10000px; top: -10000px; width: 304px; height: 100px; font-size: 12px;">

Problem solved..... I'm integrating ext in an application, with some additional stylesheets.
And in one stylesheet, there was a z-index defined for the body of -2.
-2 + 5 (from the combobox code) gives 3..... Removing the z-index from the body, solved my problem.

Jamie Avins
10 Feb 2010, 4:54 PM
Added a zindex check for expand in addition to the existing init. Fixed svn-6034.

mynameisyoda
11 Feb 2010, 3:11 AM
Sorry but I've posted a oversimplified test case. With a custom object (a predefined combo) the problem still persists.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){

var activitiesCombo = Ext.extend(Ext.form.ComboBox, {
// public config attributes
name: 'activities',
fieldLabel: 'Activities',
width: 100,
listWidth: 100,
emptyText: 'No activity selected',

initComponent:function() {
var config = {
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'codActivity',
'description'
],
data: [[1, 'activity 1'], [2, 'activity 2'],[3, 'activity 3'],[4, 'activity 4'],[5, 'activity 5'],[6, 'activity 6']]
}),
displayField:'description',
valueField:'codActivity',
triggerAction:'all',
tpl: '<tpl for="."><div ext:qtip="{description}" class="x-combo-list-item">{codActivity} {description}</div></tpl>'
} // eo config
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
activitiesCombo.superclass.initComponent.apply(this, arguments);

} // eo function initComponent
}); // eo extend

Ext.reg('activitiescombo', activitiesCombo);

var normalWindow=new Ext.Window({
title: 'Normal combo window',
width:260,
height:100,
closable: true,
closeAction: 'hide',
items:[{
xtype: 'form',
frame: true,
items: [{
xtype: 'combo',
fieldLabel: 'Normal combo',
width:100,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [[1, 'item1'], [2, 'item2'],[3, 'item3'],[4, 'item4'],[5, 'item5'],[6, 'item6']]
}),
valueField: 'myId',
displayField: 'displayText'
}]
}],
buttons:[{
text: 'Cancel',
handler: function(){
normalWindow.hide();
}
}]
});

var customWindow = new Ext.Window({
title: 'Custom combo window',
width:260,
height:100,
closable: true,
closeAction: 'hide',
border:false,
items:[{
xtype: 'form',
frame: true,
items: [{
xtype: 'activitiescombo'
}]
}],
buttons:[{
text: 'cancel',
handler: function(){
customWindow.hide();
}
}]
});


var simple = new Ext.Panel({
frame:true,
title: 'Simple panel',
bodyStyle:'padding:5px 5px 0',
width: 600,
height: 400,
items:[{
xtype:'button',
text: 'Custom',
width:60,
handler: function() {
customWindow.show();
}
},{
xtype:'button',
text: 'Normal',
width:60,
handler: function(){
normalWindow.show();
}
}]
});

simple.render(document.body);
});

</script>

</head>
<body>
</body>
</html>


See Attachment Picture3 and Picture4

Steps to reproduce:



Open the first Window
Show the list
Open the second Window
Show the list
Show again the first list

Jamie Avins
11 Feb 2010, 9:02 AM
No, your 1st case was good as is your 2nd. These are both working properly in SVN 6034/6035 (3.1.x branch and 3.2.x branch).

mynameisyoda
11 Feb 2010, 10:33 AM
My second post is tested againts SVN #6037 and the behavior persists.
How could I help you to reproduce it?

Jamie Avins
11 Feb 2010, 11:29 AM
Which branch did you check out?

mynameisyoda
12 Feb 2010, 12:59 AM
I'm not so expert in SVN (we use CVS daily); in
.svn/entries I found



dir
6037
http://code.extjs.com/svn/ext/trunk
http://code.extjs.com/svn/ext
so I suppose is trunk (ext-3.2?)

Jamie Avins
12 Feb 2010, 9:13 AM
We are currently committing to the 3.1.x and 3.2.x branches where it is more clear what versions you would be using. This is why you aren't seeing these changes. 3.1.x is what will become 3.1.2 currently and 3.2.x will become 3.2.0 when we tag them for release. This particular fix is in both branches.

mynameisyoda
12 Feb 2010, 10:05 AM
I've checked out the 3.1.x branch, rev. #6054 and the problem is fixed!
thanks a lot for the support!

Jamie Avins
12 Feb 2010, 11:37 AM
Excellent, good to hear.

TopKatz
12 Feb 2010, 12:39 PM
Is there a override or patch for this? Im on 3.1.1 and this is popping up all over the place for me. I really dont want to have to go back to 3.1.

Thanks

squ3lch
15 Feb 2010, 7:05 AM
+1 on the override request. Need this fix asap please.

INeedADip
16 Feb 2010, 11:39 AM
I'm no expert..so take this for what it's worth..but I plugged in the first couple of lines from 3.1 using override and it seemed to fix my problem:


Ext.override(Ext.form.ComboBox, {
initList : function(){
if(!this.list){
var cls = 'x-combo-list';

this.list = new Ext.Layer({
parentEl: this.getListParent(),
shadow: this.shadow,
cls: [cls, this.listClass].join(' '),
constrain:false,
zindex: 12000
});


var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.setSize(lw, 0);
this.list.swallowEvent('mousewheel');
this.assetHeight = 0;
if(this.syncFont !== false){
this.list.setStyle('font-size', this.el.getStyle('font-size'));
}
if(this.title){
this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
this.assetHeight += this.header.getHeight();
}

this.innerList = this.list.createChild({cls:cls+'-inner'});
this.mon(this.innerList, 'mouseover', this.onViewOver, this);
this.mon(this.innerList, 'mousemove', this.onViewMove, this);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));

if(this.pageSize){
this.footer = this.list.createChild({cls:cls+'-ft'});
this.pageTb = new Ext.PagingToolbar({
store: this.store,
pageSize: this.pageSize,
renderTo:this.footer
});
this.assetHeight += this.footer.getHeight();
}

if(!this.tpl){
/**
* @cfg {String/Ext.XTemplate} tpl <p>The template string, or {@link Ext.XTemplate} instance to
* use to display each item in the dropdown list. The dropdown list is displayed in a
* DataView. See {@link #view}.</p>
* <p>The default template string is:</p><pre><code>
'&lt;tpl for=".">&lt;div class="x-combo-list-item">{' + this.displayField + '}&lt;/div>&lt;/tpl>'
* </code></pre>
* <p>Override the default value to create custom UI layouts for items in the list.
* For example:</p><pre><code>
'&lt;tpl for=".">&lt;div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}&lt;/div>&lt;/tpl>'
* </code></pre>
* <p>The template <b>must</b> contain one or more substitution parameters using field
* names from the Combo's</b> {@link #store Store}. In the example above an
* <pre>ext:qtip</pre> attribute is added to display other fields from the Store.</p>
* <p>To preserve the default visual look of list items, add the CSS class name
* <pre>x-combo-list-item</pre> to the template's container element.</p>
* <p>Also see {@link #itemSelector} for additional details.</p>
*/
this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';
/**
* @cfg {String} itemSelector
* <p>A simple CSS selector (e.g. div.some-class or span:first-child) that will be
* used to determine what nodes the {@link #view Ext.DataView} which handles the dropdown
* display will be working with.</p>
* <p><b>Note</b>: this setting is <b>required</b> if a custom XTemplate has been
* specified in {@link #tpl} which assigns a class other than <pre>'x-combo-list-item'</pre>
* to dropdown list items</b>
*/
}

/**
* The {@link Ext.DataView DataView} used to display the ComboBox's options.
* @type Ext.DataView
*/
this.view = new Ext.DataView({
applyTo: this.innerList,
tpl: this.tpl,
singleSelect: true,
selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item',
emptyText: this.listEmptyText,
deferEmptyText: false
});

this.mon(this.view, {
containerclick : this.onViewClick,
click : this.onViewClick,
scope :this
});

this.bindStore(this.store, true);

if(this.resizable){
this.resizer = new Ext.Resizable(this.list, {
pinned:true, handles:'se'
});
this.mon(this.resizer, 'resize', function(r, w, h){
this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
this.listWidth = w;
this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
this.restrictHeight();
}, this);

this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
}
}
}
});