PDA

View Full Version : Combobox drop down width



bkraut
6 Aug 2009, 3:34 AM
Hi,

I noticed some strange behaviour when I added layout: 'fit' to the Ext.Window config.

If there is a FormPanel with a combobox on the Window, combo drop down is just a few pixels wide. If I take layout fit from the Ext.Window config, combo drop down is automatically resized to fit the needs of the displayed content.



getModuleMenuItemFormWindow: function() {
return ObjectVerse.getDesktop().createWindow({
title: 'Menu Item',
layout: 'fit', // This is the line making problems
items: [{
xtype: 'ExtendedFormPanel',
items: [{
xtype : "fieldset",
title : "Module information",
autoHeight: true,
items: [{
xtype:'textfield',
fieldLabel: 'Name',
name: 'name',
width: 250
},{
xtype: 'combo',
allowBlank: true,
fieldLabel: 'Menu Item Type',
name: 'menuItemType',
store: new Ext.data.JsonStore({
url: 'Controller/Module/ModuleMenuItemTreeLoader',
root: 'data',
autoLoad: true,
totalProperty: 'total',
fields: MetaPackage
}),
displayField: 'name',
grow: true,
hiddenName: 'typeId',
valueField: 'id',
emptyText: 'Select menu item type ...',
selectOnFocus: true,
mode: 'remote',
triggerAction: 'all',
forceSelection: true,
width: 250
}]
}]
}],
listeners: {
close: function(panel){

},
scope: this
}
});
}


Did I forget something?

Animal
6 Aug 2009, 3:38 AM
what's the problem you are facing?

You should always use a layout.

bkraut
6 Aug 2009, 12:29 PM
Here is the result if layout: 'fit' is used. Othervise the combo is resized properly. ???

Animal
6 Aug 2009, 12:32 PM
What's ExtendedFormPanel?

bkraut
7 Aug 2009, 3:18 AM
A common configuration class for other forms of the system:



Ext.namespace("Ext.ux");

Ext.ux.ExtendedFormPanel = Ext.extend(Ext.form.FormPanel, {

// ***********************************************************************************
// ***********************************************************************************
// Init component
// ***********************************************************************************
// ***********************************************************************************

initComponent: function() {

Ext.apply(this, {
frame:false,
autoScroll: true,
margins:'3 3 3 0',
cmargins:'3 3 3 3',
bodyStyle:'padding:5px 5px 0',
defaultType: 'textfield',
labelAlign: 'left',
labelWidth: 150,
border: false,
layout: 'fit',
tbar: ['->',{
text: 'Reporter',
iconCls:'print',
handler: this.createReporterWindow,
scope: this
}],
bbar: ['->',{
text: 'Cancel',
iconCls:'cancel',
waitMsg:'Canceling ...',
handler: function(e, a) {
this.fireEvent('cancel');
}.createDelegate(this)
},{
text: 'Save',
iconCls:'save',
waitMsg:'Saving ...',
handler: function(e, a) {
this.fireEvent('submit');
}.createDelegate(this)
}]
});

Ext.ux.ExtendedFormPanel.superclass.initComponent.apply(this, arguments);
},

// ***********************************************************************************
// ***********************************************************************************
// On render
// ***********************************************************************************
// ***********************************************************************************

onRender: function() {
Ext.ux.ExtendedFormPanel.superclass.onRender.apply(this, arguments);
},

createReporterWindow: function(button, event) {
var desktop = ObjectVerse.getDesktop();
var win = desktop.getWindow('SysReporterWindow');
if (!win) {
win = desktop.createWindow({
xtype: 'ReporterWindow',
id: 'SysReporterWindow',
title: 'Reporter',
width: 800,
height: 600
});
}
win.show();
}

});

// ***********************************************************************************
// ***********************************************************************************
// Registering xtype
// ***********************************************************************************
// ***********************************************************************************

Ext.reg('ExtendedFormPanel', Ext.ux.ExtendedFormPanel);

bkraut
13 Aug 2009, 10:38 AM
I found out that an error happens in ext-all-debug.js in the line 54442


this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));


Somehow an innerList is assigned with a 68px. lw is 70 and this.list.getFrameWidth('lr') is 2. Why I have no idea.

Actually in the line 54426



var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);


this.wrap.getWidth() is not calculated correctly and therefore in the upper mentioned line a wrong size is assigned to the innerList.

Animal
13 Aug 2009, 11:18 AM
So when you break at line 54426, and execute this.wrap.getWidth() on the console command ilne, what does it return?

When you type this.wrap.dom into the console command line and press return, and it displays the element, and you right click on it and examine it in the HTML tab, what are its properties?

All quick, simple Firebug debugging things that ca get you to the heart of a problem like this in 5 minutes, and have it resolved in 10.

mazhekin
8 Sep 2009, 6:29 AM
Set anchor :100% for combobox. It will resolve the problem.

bkraut
18 Sep 2009, 5:29 AM
This will resize the whole combo, not just the list.

royle78
15 Oct 2009, 9:28 AM
I just ran into this same problem and by changing the layout on the window to 'form' it fixed it. Hope that helps.

an2ny21
10 Nov 2009, 11:39 PM
you can use a config option in the combo box . minListWidth: 200
i'm not sure though if it works with the layout 'fit'

bkraut
16 Nov 2009, 5:07 AM
minListWidth does not help. I'd like that my list is resized to item width.

asagala
18 Nov 2009, 6:11 AM
I have the same issue. Did you find a solution?

Condor
18 Nov 2009, 7:15 AM
This happens when you render the combobox in a container that is hidden with display:none.

Is the combobox initially in a hidden or collapsed container?

For hidden containers use hideMode:'offsets' and for collapsed containers, start out expanded and collapse after layout.