I have a combo box of client customer names connected to a remote store that contains... maybe a few hundred records. Too big to preload. But my form also has an "account number" box that when the account number is typed in, and the "lookup" button is pressed, it automatically populates all the form fields. --And this is working great; except...

When I load my form I populate the comboBox id with the index value, and the hiddenValue with the appropriate index value. But, when I try to resubmit the form, the value coming back is null.

I'm thinking that even though the display value is being loaded, the hiddenValue isn't. So, even though the combo has the right text, it's not been actually "selected" and so, when it goes to submit it chokes.

I *suppose* I could rewrite my submission action on the back end to take the display value, and then use that as a key to lookup the correct index value in the database, but... it doesn't seem like I should have to do that when I know the combo box should be able to submit the index in the first place...

Anyone have any ideas? Is this how things are supposed to work? Or, am I be dense and probably missing something obvious?

Code snippets below:

My action:
$n = array();
$n['title'] = $r->title;
$n['description'] = $r->description;
$n['notes'] = $r->notes;
$n['arrival_date'] = $r->arrival_date;
$n['provider_id'] = $r->provider_id; //loads the id into the combo
$n['provider'] = $this->getFullNameByID($r->provider_id); //loads the text too!

$data =trim (CJSON::encode( $n ), "[]");  // removes unnecessary brackets
echo "{success:true,data:$data}"; // push payload into a "data" element in a JSON string.
My JavaScript load form ajax:

Ext.getCmp("btnLookup").on('click', function() {
            method: 'POST',
            url: 'index.php?r=inventory/getCustomerByID',
            timeout: 60000,
            params: {
                id: f.findById("uid").getValue(),
            success: function(result, request) {
                var jsonData = Ext.util.JSON.decode(result.responseText);
                var data =;
The Ext field definition:
dataProvider = function() {
        return {
            bodyStyle: 'padding:0 5px',
            layout: 'form',
            labelAlign: 'left',
            defaults: {
                anchor: '100%'
            items: [{
                labelWidth: 55,
                fieldLabel: 'Data Provider',
                id: 'provider',
                xtype: 'combo',
                editable: false,
                triggerAction: 'all',
                typeAhead: false,
                hideTrigger: false,
                loadingText: 'Searching...',
                mode: 'remote',
                minChars: 2,
                store: this.nameStore,
                displayField: 'val',
                hiddenName: 'provider_id',
                valueField: 'id'