PDA

View Full Version : Is fieldLabel supported on ComboBoxes?



BernieM
21 Apr 2008, 11:37 AM
I have a ComboBox which renders and works fine, for the most part. However, I cannot get it to render the fieldLabel. I've stepped through the code in Firebug, and I see it rendering the trigger, but I never see a renderer for the fieldLabel being called. I have some TextFields on the same page, and they are rendered as expected, so I'm puzzled as to why it doesn't seem to affect the ComboBox.

Another piece of information: I noticed that the field labels are being rendered by the form layout. There are several levels of layouts surrounding my ComboBox. The top-level panel has a border layout. Then I have a 'navigation panel' that also has a border layout. This in turn has a 'filter panel' with a third border layout. My ComboBox originally hung off of the 'filterPanel', but since it was failing and I saw that the form layout was actually rendering the labels for text fields, I added a 'combo box' FormPanel as an item in the 'filter panel' and put my ComboBox inside that. Still no luck. I still don't see the form layout getting called for the ComboBox in FireBug.

I see three possibilities here: The first is that ComboBoxes don't support fieldLabels. The second is that FormPanels don't render correctly when nested under multiple Panels with border layouts. The third is that I am missing something obvious and have just looked at this problem for so long that I am missing it.

Here are some code fragments. Can anyone verify or dispute my statements above and/or find anything wrong with my code fragments below? Thanks in advance!



var myComboBox = new Ext.form.ComboBox({
store: myDataStore,
fieldLabel: 'Name',
hideLabel: false,
displayField: 'name',
title: 'Select a Name',
labelSeparator: ':',
typeAhead: true,
mode: 'remote',
emptyText: 'Enter a Name',
loadingText: 'Finding Names...',
pageSize: 10,
tpl: nameTpl,
applyTo: 'myInput',
itemSelector: 'div.search-item',
width: 230
});

var comboBoxPanel = new Ext.form.FormPanel({
id: 'comboBoxPanel',
contentEl: 'comboBoxDiv',
region: 'center',
layoutConfig: {hideLabels: false},
border: false,
items: [myComboBox ]
});

var nameFilterPanel = new Ext.Panel({
id: 'nameFilterPanel',
title: 'Name Filter',
region: 'north',
width: 500,
layout: 'border',
items: [
comboBoxPanel , {
xtype: 'panel',
contentEl: 'resetButton',
region: 'east',
layout: 'fit',
border: false,
items: [resetButton]
}
],
contentEl: 'filterDiv',
collapsible: true,
collapsed: false
});

Animal
21 Apr 2008, 1:30 PM
labels are rendered by the form layout. Your second Panel which contains nothing but a COmboBox needs layout:'form'