How to use Ext.form.field.ComboBox with LABKEY.ext.Store ?

LabKey Support Forum (Inactive)
How to use Ext.form.field.ComboBox with LABKEY.ext.Store ? Ben Bimber  2012-04-06 17:20
Status: Closed
 
Hi Leo,

The LabKey store works essentially the same as an Ext one that it extends. The primary reason the LabKey store was created is b/c this store is able to query and save records from the LabKey server. There's a few things you should look at with this example:

1) In your post you are mixing Ext3 code (the LabKey store) with Ext4 (the combo). While Ext3 and Ext4 are similar, it's unlikely you can mix and match like this. Instead I'd suggest using the Ext3 combo. We are working on migrating our API to Ext4; however, we do not have a public release of an Ext4 LabKey store yet.

2) You need to load the store. Unless you tell it to get the records from the server, it will have 0 records. You can either add 'autoLoad: true' to the config or call load() after you create it. See my example below.

3) displayField and valueField are Ext config properties of the combo, not the store. They tell the combo which fields to display in the pick list, and which to use as the underlying value when you pick an item. These need to match a field present in the associated store, and they are case-sensitive. This looks like a custom query, so I cant say for sure what you should use as values for these.

4) Ext3 combos require a few other config options to populate correctly. It's annoying (ext4 is improved). See the extra config added to my example below.

This pattern should work for you:

   var storeSampleIds = new LABKEY.ext.Store({        schemaName: 'flow',        queryName: 'SampleIds',        autoLoad: true //required to load the store    });

new Ext.form.ComboBox({        store: storeSampleIds,        queryMode: 'local',        triggerAction: 'all',        renderTo: 'comboBoxSampleIds',        displayField: 'myField', //should be a case-sensitive match to a field's name in the query flow.SampleIds        valueField: 'myValueField' //see above    });

Let me know if you have any questions.