View Full Version : ComboBox and local ArrayStore

9 Jul 2010, 12:22 PM

I try to connect a ComboBox with a local ArrayStore and configured both the following way:

The Store:
- "data" contains a list of strings ['A', 'B', 'C']
(I'm missing the "fields" parameter, don't know how to configure this in Designer)

- connected to the Store
- mode: local

I want the ComboBox to show up the items of the list, but it doesn't work. What I am missing?

Thanks for any help.

9 Jul 2010, 12:37 PM
Hi flosch,

A few things are missing. One is the fields, which is not a configuration parameter but something you add in the Component Tree. Right-click on your store and go to Quick Add -> 1 field. Slightly hidden, we'll have to revise the placement of that...So with your one field there, give it a name of "text" or whatever you'd like.

Next, data for an ArrayStore must be an "array of arrays". The outer array is all of the records, where each inner array is a record per, and each item in each inner array is a "field of data". So you would want to put [['A'], ['B'], ['C']]. The "text" field represents, A, B, and C respectively.

Finally on your ComboBox, you can just setup the displayField and valueField to both be "text". Lastly, set triggerAction to "all", and you should have yourself a working ComboBox connected to your ArrayStore of data.

Let me know if that helps or if you need further assistance.

9 Jul 2010, 1:07 PM
Hey jarred,

thanks for your fast response!

This worked for me, for autocomplete at least (if I type "A" in the textfield and the array contains "Automatic", it will autocomplete to "Automatic"). But: The dropdown menu which should show me all available items doesn't come up - if I press the arrowbutton it simply doesn't react and shows me nothing.

Any ideas?

9 Jul 2010, 1:11 PM
Is triggerAction set to "all"? That's what's required to make the trigger (drop down) button show all available items.

9 Jul 2010, 1:13 PM
Yep it is. The generated code looks like

MyComboUi = Ext.extend(Ext.form.ComboBox, {
mode: 'local',
displayField: 'form',
emptyText: 'Rechtsform',
store: 'LegalForm',
valueField: 'form',
triggerAction: 'all',
allowBlank: false,
initComponent: function() {

The store:

sLegalForm = Ext.extend(Ext.data.ArrayStore, {
constructor: function(cfg) {
cfg = cfg || {};
sLegalForm.superclass.constructor.call(this, Ext.apply({
storeId: 'LegalForm',
data: [
fields: [
name: 'form'
}, cfg));
new sLegalForm();

9 Jul 2010, 1:30 PM
That's very strange that it's not working. It works perfectly well for me. I recreated the same setup as you (different data, but everything else is pretty much the same).


9 Jul 2010, 1:32 PM
Ok, figured out why it doesn't work. The combobox was part of a CompositeField. If I detach it and let it stay alone, it works. If I drag it back to the CompositeField it doesn't work again. Maybe a Designer or ExtJS bug?

My XDS: http://dl.dropbox.com/u/92987/crm.xds

(I have two comboboxes in my XDS, one outside a CompositeField which works well, and one inside a CompositeField which doesn't work. If you drag this one within the CompositeField out it also works.)

Thanks in advance.

9 Jul 2010, 1:48 PM
That's strange indeed. Pretty sure that's a Ext JS bug. I'll look into this for you. Thanks for reporting it.

9 Jul 2010, 1:49 PM
Thanks a lot!