PDA

View Full Version : ComboBox fails in nexted window



catapult
23 Aug 2010, 5:54 AM
Hi all,

I have a problem where a combobox doesn't work correctly when I use nested windows. If I click the dropdown the list does not display. I can type in the value of a list item and that seems to work fine.

If if put the nested window that contains the combobox into its own script it works correctly. e.g. if I put "testwindow1" and the "package_store" into it's own script.

Here's my test script:



// Window dimensions:
var theHeight;
if (window.innerHeight)
{theHeight=window.innerHeight;}
else if (document.documentElement && document.documentElement.clientHeight)
{theHeight=document.documentElement.clientHeight;}
else if (document.body)
{theHeight=document.body.clientHeight;}
windowHeight=theHeight*0.95;//set window with to 95%
function browserResized()
{
Ext.getCmp('dashboardwindow').doLayout();
}
Ext.EventManager.onWindowResize(browserResized);
Ext.BLANK_IMAGE_URL = '../libraries/extjs/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var package_store = new Ext.data.JsonStore({
fields: ['PackageID', 'PackageDesc'],
data: [
{PackageID: 'all', PackageDesc: 'All Packages'},
{PackageID: 'aaa', PackageDesc: 'AAA'},
{PackageID: 'bbb', PackageDesc: 'BBB'},
{PackageID: 'ccc', PackageDesc: 'CCC'},
{PackageID: 'ddd', PackageDesc: 'DDD'}
]
});

testWindow1 = new Ext.Window({
id : 'testwindow1',
height : 400,
width : 800,
constrain : true,
closeAction : 'hide',
title : 'Test Window1',
x : 0,
y : 0,
items : [
{
xtype : 'panel',
layout : 'form',
height : 25,
border : false,
items : [
new Ext.form.ComboBox({
store : package_store,
typeAhead : true,
forceSelection : true,
triggerAction : 'all',
emptyText : 'Select a package...',
hideLabel : true,
name : 'packageselector',
id : 'packageselector',
mode : 'local',
displayField : 'PackageDesc',
valueField : 'PackageID',
hiddenName : 'combopackageselector',
value : 'all',
width : 150,
allowBlank : false
})
]
}]
});
testWindow1.show();

testWindow2 = new Ext.Window({
id : 'testwindow2',
height : 400,
width : 800,
constrain : true,
closeAction : 'hide',
title : 'Test Window2',
items : [
{
html : 'Test Window 2'
}]
});

menuBar = new Ext.menu.Menu({
floating : false,
showSeparator : false,
style : {
backgroundColor : '#E6EDF8'
},
items : [
{
text : 'Window 1',
handler : function(){
Ext.getCmp('testwindow1').show();
}
},
{
text : 'Window 2',
handler : function(){
Ext.getCmp('testwindow2').show();
}
}]
});

dashboardWindow= new Ext.Window({
id : 'dashboardwindow',
title : 'Dashboard',
modal : true,
draggable : false,
resizable : false,
closable : true,
height : windowHeight,
width : '95%',
layout : 'fit',
border : false,
items : [
{
xtype : 'panel',
layout :'border',
border : true,
items :[
{
region : 'west',
id : 'west-panel',
title : 'Menu',
split : true,
width : 200,
minSize : 175,
maxSize : 400,
collapsible : true,
collapseMode : 'mini',
margins : '5 0 5 5',
cmargins : '5 5 5 5',
layout : 'fit',
items :[
menuBar
]
},
{
region : 'center',
id : 'dashboardcenter',
border : true,
items : [
testWindow1,
testWindow2
]
}]
}]
});
dashboardWindow.show();
});


I get no error messages so I have no idea what the problem is. Any help greatly appreciated.

Thanks

Condor
23 Aug 2010, 6:04 AM
Windows are not supposed to be used as items in a layout!

Instead, use a normal Ext.Panel with frame:true,baseCls:'x-window'.

catapult
23 Aug 2010, 6:12 AM
Thanks for that Condor.

Is it possible that I can make the panel act like a window? I basically want the ability to move and resize the panel within its parent container. I'm trying to create a dashboard with multiple panels. Having changed from window to panel this functionality has disappeared.

Cheers

Condor
23 Aug 2010, 6:21 AM
You could also make the panel floating:true (but a panel isn't resizable or draggable by default).

ps. Wouldn't a portal layout look more organized than randomly placed panels?

catapult
23 Aug 2010, 6:35 AM
I am trying to create a dashboard for various graphs/charts showing statistical data. I wanted a menu of charts on the left which when clicked would open the chart within the viewing pane in a window/panel that would allow the user to be able to resize and move the panel around. If I could get the combobox working it would be perfect.

What is it exactly that is stopping the combobox working?

Condor
23 Aug 2010, 7:09 AM
I think it is working, but the z-index puts it below the window (I posted a bugfix for this in the Bugs forum).

catapult
23 Aug 2010, 7:19 AM
You wouldn't happen to have the link to the bug fix? I have searched the forum but haven't found anything.

Condor
23 Aug 2010, 7:22 AM
Here you go (http://www.sencha.com/forum/showthread.php?97227-CLOSED-Combo-Z-Index-issue&p=459092#post459092).

catapult
24 Aug 2010, 1:42 AM
Hi Condor,

I seem to have it working now, definitely a strange one. I had to modify your bug fix slightly to get it going.

As I understand it the function is working its way up the DOM tree to the parent element, which for my code is the “dashboardWindow”. As it goes along it is testing for the z-index of the element. I found that if I alerted the returned value it displayed a NaN value. I have modified your code to test for a NaN value.

I had to include the “expand” function in the override otherwise it wouldn’t work. I haven’t changed the function it is exactly the same as the base combobox.js. As I said, strange.

Here’s the code anyway and thanks for all your help.



Ext.override(Ext.form.ComboBox, {
getParentZIndex : function(){
var zindex = 0;
var styleZindex = 0;
if (this.ownerCt){
this.findParentBy(function(ct){
if(!isNaN(parseInt(ct.getPositionEl().getStyle('z-index'))))
{
styleZindex=parseInt(ct.getPositionEl().getStyle('z-index'));
}
zindex = Math.max(zindex, styleZindex, 10);
});
}
return zindex;
},
expand : function(){
if(this.isExpanded() || !this.hasFocus){
return;
}

if(this.title || this.pageSize){
this.assetHeight = 0;
if(this.title){
this.assetHeight += this.header.getHeight();
}
if(this.pageSize){
this.assetHeight += this.footer.getHeight();
}
}

if(this.bufferSize){
this.doResize(this.bufferSize);
delete this.bufferSize;
}
this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign));

// zindex can change, re-check it and set it if necessary
var listParent = Ext.getDom(this.getListParent() || Ext.getBody()),
zindex = parseInt(Ext.fly(listParent).getStyle('z-index') ,10);
if (!zindex){
zindex = this.getParentZIndex();
}
if (zindex) {
this.list.setZIndex(zindex + 5);
}
this.list.show();
if(Ext.isGecko2){
this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
}
this.mon(Ext.getDoc(), {
scope: this,
mousewheel: this.collapseIf,
mousedown: this.collapseIf
});
this.fireEvent('expand', this);
}
});