PDA

View Full Version : ComboBox not dropping down when clicking arrow



bradlymathews
6 Mar 2014, 2:26 PM
I have a two comboboxes on this form which are set up the same way, but one does not drop down except in certain situations.

The form is populated with a REST store. All fields are displaying the correct values. I am using ExtJS 4.2. I have tried the most recent versions of Chrome and FireFox.

I can type in the dropdown, and if I empty the field, the allowBlank field validation fires and I can drop it down by clicking the arrow. After I select a value, I can no longer drop it down. If I type in 5 characters in the field, it drops down all by itself. Again, if I select a value I can no longer click the arrow to drop the list and select a different value.

Any clues as to what I am doing wrong here?

This one works:


{
xtype: 'combobox',
fieldLabel: 'State',
name: 'state',
valueField: 'state',
displayField: 'state',
store: new Ext.data.SimpleStore({
fields: ['state'],
data: lists.states
}),
allowBlank: false,
forceSelection: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select a state...',
selectOnFocus: true,
msgTarget: 'side',
width: 200
}


This one does not:


{
xtype: 'combobox',
fieldLabel: 'Industry',
name: 'industry',
valueField: 'industry',
displayField: 'industry',
store: new Ext.data.SimpleStore({
fields: ['industry'],
data: lists.industry
}),
allowBlank: false,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select an industry...',
selectOnFocus: true,
msgTarget: 'side',
width: 300
}


Here is the entire FormPanel in case there is something wrong here:



this.form = new Ext.form.Panel({
renderTo: this.renderToDIV,
frame: true,
title: this.formTitle,
width: 1024,
bodyPadding: 5,
waitMsgTarget: true,
trackResetOnLoad: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 100,
msgTarget: 'side'
},
store: this.store,
layout: 'hbox',
items: [{
xtype: 'container',
layout: 'anchor',
width: 300,
//flex: 1,
margin: '0, 0, 0, 0',
defaultType: 'textfield',
fieldDefaults: {
labelWidth: 60
},
items: [{
fieldLabel: 'id',
readOnly: true,
name: 'id',
width: 150
}, {
fieldLabel: 'Company',
name: 'company',
width: 300
}, {
fieldLabel: 'Name',
name: 'name',
width: 300
}, {
fieldLabel: 'Position',
name: 'position',
width: 300
}, {
fieldLabel: 'Street',
name: 'street',
width: 300
}, {
fieldLabel: 'City',
name: 'city',
width: 300
}, {
xtype: 'combobox',
fieldLabel: 'State',
name: 'state',
valueField: 'state',
displayField: 'state',
store: new Ext.data.SimpleStore({
fields: ['state'],
data: lists.states
}),
allowBlank: false,
forceSelection: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select a state...',
selectOnFocus: true,
msgTarget: 'side',
width: 200
}, {
fieldLabel: 'ZIP',
name: 'zip',
width: 200
}]
}, {
xtype: 'container',
layout: 'anchor',
padding: '0, 0, 0, 0',
width: 300,
defaultType: 'textfield',
//flex: 1,
items: [{
fieldLabel: 'Email',
name: 'email',
width: 300
}, {
fieldLabel: 'Phone',
name: 'phone',
width: 250
}, {
fieldLabel: 'Phone2',
name: 'phone2',
width: 250
}, {
fieldLabel: 'Fax',
name: 'fax',
width: 250
}, {
xtype: 'combobox',
fieldLabel: 'Industry',
name: 'industry',
valueField: 'industry',
displayField: 'industry',
store: new Ext.data.SimpleStore({
fields: ['industry'],
data: lists.industry
}),
allowBlank: false,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select an industry...',
selectOnFocus: true,
msgTarget: 'side',
width: 300
}, {
fieldLabel: 'Industry Other',
name: 'industryother',
width: 250
}, {
fieldLabel: 'User Name',
name: 'username',
width: 250
}, {
fieldLabel: 'Password',
name: 'password',
width: 250
}, {
fieldLabel: 'Website',
name: 'website',
width: 300
}, {
fieldLabel: 'Logo',
name: 'logo',
width: 250
}]
}, {
xtype: 'container',
margin: '0, 0, -20, 0',
//flex: 1,
width: 400,
fieldDefaults: {
labelWidth: 65
},
layout: 'anchor',
items: [{
xtype: "textareafield",
fieldLabel: 'Notes',
name: 'notes',
width: 400,
height: 250
}]
}],
dockedItems: standardFormNav
});

scottmartin
6 Mar 2014, 2:47 PM
I would suspect your store is empty or something like that. What happens if you just create an array of data like in the API example:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox

Also, you can just use Ext.data.Store instead of SimpleStore.

bradlymathews
6 Mar 2014, 3:47 PM
The ComboBox store does not appear to be empty. When it does drop down, the list is populated as I expect it to be. And I am using an array like in the example. See my code for that below.

The form store is also not empty, all of the fields are populated as expected.

I am doing it right on the states ComboBox - it works fine. So what am I doing wrong on the industry ComboBox? Or might some external influence be screwing it up? Can't find it, but does not mean its not there.

Thanks!
Brad



var lists = {
states: [
['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'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"],
['FL', 'Florida', 'The Sunshine State'],
['GA', 'Georgia', 'The Peach State'],
['HI', 'Hawaii', 'The Aloha State'],
['ID', 'Idaho', 'Famous Potatoes'],
['IL', 'Illinois', 'The Prairie State'],
['IN', 'Indiana', 'The Hospitality State'],
['IA', 'Iowa', 'The Corn State'],
['KS', 'Kansas', 'The Sunflower State'],
['KY', 'Kentucky', 'The Bluegrass State'],
['LA', 'Louisiana', 'The Bayou State'],
['ME', 'Maine', 'The Pine Tree State'],
['MD', 'Maryland', 'Chesapeake State'],
['MA', 'Massachusetts', 'The Spirit of America'],
['MI', 'Michigan', 'Great Lakes State'],
['MN', 'Minnesota', 'North Star State'],
['MS', 'Mississippi', 'Magnolia State'],
['MO', 'Missouri', 'Show Me State'],
['MT', 'Montana', 'Big Sky Country'],
['NE', 'Nebraska', 'Beef State'],
['NV', 'Nevada', 'Silver State'],
['NH', 'New Hampshire', 'Granite State'],
['NJ', 'New Jersey', 'Garden State'],
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State'],
['SC', 'South Carolina', 'Nothing Could be Finer'],
['SD', 'South Dakota', 'Great Faces, Great Places'],
['TN', 'Tennessee', 'Volunteer State'],
['TX', 'Texas', 'Lone Star State'],
['UT', 'Utah', 'Salt Lake State'],
['VT', 'Vermont', 'Green Mountain State'],
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', "America's Dairyland"],
['WY', 'Wyoming', 'Like No Place on Earth']
],


industry: [
['Environmental Consulting'],
['Environmental Engineering'],
['Lender/Banking'],
['Residential Real Estate'],
['Commercial Real Estate'],
['Consumer'],
['Other']
],
}

skirtle
6 Mar 2014, 5:35 PM
Your code is working fine for me but I do have some observations.

The 'type 5 characters' bit is consistent with a minChars of 5. Are you sure it's 5 and not 4? The default for a remote combobox is 4.

mode is not a valid setting in ExtJS 4. You want queryMode instead.

However, none of this explains the problem you're having, because triggerAction: 'all' should prevent minChars making any difference. What you're seeing is more consistent with triggerAction: 'query'.

The way you're configuring your store is also very Ext 3. It should be something like this:


store: {
type: 'array',
fields: ['industry'],
...
}