My LABKEY.ext.Store gets its data from a Labkey custom query:
storeSampleIds = new LABKEY.ext.Store({
schemaName: 'flow',
queryName: 'SampleIds'
});
Here is my ComboBox:
Ext4.create('Ext.form.ComboBox', {
store: storeSampleIds,
queryMode: 'local',
renderTo: 'comboBoxSampleIds'
});
Looks like a ComboBox requires valueField config option set up and it seems to come from one of the fields of a store (for Ext default type, not sure about expanded Labkey one).
So how would I go about doing this?
Thanks. |
|
Ben Bimber responded: |
2012-04-06 17:20 |
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. |
|
Leo Dashevskiy responded: |
2012-04-06 18:55 |
Thanks, Ben. That seems to work.
Some more questions about a comboBox and a related LOVcomboBox
Would you know if this is the intended behavior of LOVCombo/regularCombo that when you click on the arrow to show the pull down menu and select something (and then click once more on the arrow to hide the list of choices for the LOVCombo) and then if you were to click on the arrow one more time, then the original entire list (with your selection highlighted) does not show up ?
Or could it be configured somehow to be the same as for the classical HTML <select> tag?
Its behavior is such that after you selected something if you were to click on the pull-down arrow one more time, then the entire menu would show up with your selection.
Also would you know, by any chance, if this widget is configurable so that one can set a length for the list of the pull-down menu, so that one could paginate through all of the options back and forth if the number of them is greater, than that set length? (I believe, I have seen something like that somewhere just recently, but cannot recall exactly.)
Thank you.
-Leo |
|
Ben Bimber responded: |
2012-04-06 19:15 |
hi leo,
that behavior for the LOV combo does not sound like what i would expect, but i cant say much without looking at the code. the behavior you describe sounds like something is applying a filter on the store - any chance some code is doing this?
i'm not aware of anything using a basic <select>.
i have a vague recollection of seeing a paged combo list like you describe; however, it would probably be ext4. if you have a really long list I might consider just supporting type-ahead (ext combos can do this). |
|
Leo Dashevskiy responded: |
2012-04-11 17:22 |
Seems like needed extra config options for things to work smoother, such as
triggerAction: 'all',
forceSelection: true,
typeAhead: true,
minChars: 0,
Thanks.
Btw, I think either Ext4 itself or you guys independently should include the following "SuperComboBox" in the next release:
http://technomedia.co.uk/SuperBoxSelect/examples3.html |
|
Ben Bimber responded: |
2012-04-11 22:34 |
Hi Leo,
Glad it seems to be working. Ext Combos do require some non-intuitive configuration, but hopefully once you've got one working the rest should be easy. Ext4 seems to be a little simpler for combos when/if you start working with that.
With respect to custom Ext components: one of the advantages of a framework like Ext is that there are libraries of widgets to draw from, along with many user-provided extensions like the Supercombo. If you are writing a custom module, it's pretty easy to include and use these. It's usually smarter to draw from one of these rather than reinvent it. However, we want to be careful about what is included with LabKey by default. There isnt really anything labkey-specific about the SuperCombo, and therefore it probably would not get included unless actively used somewhere in the core. What's useful to one application may or may not be useful to another. In contrast, the Ext components that are part of the LabKey API (LABKEY.ext.Store, FormPanel, etc) all contain customization specifically designed for use with LabKey. Ext does seem to be incorporating more user-written widgets into its core library, and getting something like SuperCombo covered by Ext might be useful (I'm afraid that's completely out of our hands though). |
|
Leo Dashevskiy responded: |
2012-06-20 15:41 |
Hello, so did I hear correctly that Labkey.store can now work with Ext4.combo ? |
|
Ben Bimber responded: |
2012-06-20 20:33 |
Hi Leo,
We do not have an officially released Ext4 version of our client API; however, an early version is included with 12.1. We use it on several LabKey pages. If you're interested in using it for development, you are welcome to try it; however, please note that this is not an official API yet and therefore may change in future releases. If you're interested, let me know. |
|
Leo Dashevskiy responded: |
2012-06-21 11:20 |
Thanks, I think I like being up-to-speed with the latest tendencies and using bleeding edge stuff :) |
|
|
|