Ext-JS 4 - strange behavior with submitting combobox to server

Question

I have a combobox in a form:

{
    xtype: 'combobox',
    fieldLabel: 'Jurisdictions',
    name: 'jurisdiction_id',
    id: 'ComboboxJurisdictions',
    store: Ext.create('App.store.Jurisdictions'),
    queryMode: 'local',
    editable: false,
    displayField: 'name',
    valueField: 'id',
}

Data is:

1 => Administrator
2 => User
3 => Guest

Now, if I don't touch anything when editing a user, on my server for my combobox I get "Administrator" (displayField), but when I change something in combobox I get the "id" (valueField). I really just want "id" in both cases. I was reading about hiddenName? Is that the case?

If you need any more code, feel free to ask. :)

Thank you!

EDIT (more code)

1.) There is no default value.

Here is the whole view code:

Ext.define('App.view.Suits.Update', {
    extend: 'Ext.window.Window',
    title: 'Suits',
    width: 250,
    id: 'UpdateWindowSuits',
    defaultType: 'textfield',
    items: [{
        xtype: 'UpdateFormSuits'
    }],
    buttons: [
      { text: 'Save', id: 'submitUpdateFormButtonSuits'},
      { text: 'Cancel', id: 'cancelUpdateFormButtonSuits'},
    ]
});

Ext.define('App.view.Suits.UpdateForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.UpdateFormSuits',
    layout: 'form',
    id: 'UpdateFormSuits',
    bodyPadding: 5,
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Id',
        name: 'id',
        hidden: true
    },{
        fieldLabel: 'Name',
        name: 'name',
        allowBlank: false,
    },{
        fieldLabel: 'Status',
        name: 'status',
        allowBlank: false

    },{
        xtype: 'combobox',
        fieldLabel: 'Priority',
        name: 'suit_priority_id',
        id: 'ComboboxSuitPriorities',
        store: Ext.create('App.store.SuitPriorities'),
        editable: false,
        displayField: 'name',
        hiddenName: 'id',
        valueField: 'id'
    },{
        xtype: 'combobox',
        fieldLabel: 'Jurisdictions',
        name: 'jurisdiction_id',
        id: 'ComboboxJurisdictions',
        store: Ext.create('App.store.Jurisdictions'),
        queryMode: 'local',
        editable: false,
        displayField: 'name',
        valueField: 'id',
    }],
});

Here is the store:

Ext.define('App.store.SuitPriorities', {
    extend: 'Ext.data.Store',

    // Where is the Model.
    model: 'App.model.SuitPriority',

    // "id" of the Store.
    storeId: 'SuitPriorities',

    // Autoload all data on creation.
    autoLoad: true,

    // Number of records in one page (for pagination).
    pagesize: 20,

    // Proxy for CRUD.
    proxy: {

        // Type of request.
        type: 'ajax',

        // API for CRUD.
        api: {
            create  : 'php/suitpriorities/update',
            read    : 'php/suitpriorities/read',
            update  : 'php/suitpriorities/update',
            destroy : 'php/suitpriorities/delete'
        },

        // Type of methods.
        actionMethods: {
            create  : 'POST',
            read    : 'POST',
            update  : 'POST',
            destroy : 'POST'
        },

        // Reader.
        reader: {

            // Which type will the reader read.
            type: 'json',

            // Root of the data.
            root: 'suitpriorities',
            rootProperty: 'data',

            // One record.
            record: 'SuitPriority',

            // Message and success property.
            successProperty: 'success',
            messageProperty: 'message'
        },

        // Writer (when sending data).
        writer: {
            type: 'json',
            writeAllFields: true,
            root: 'data',
            encode: true
        },
});

As I sad, the store is getting all the data because it's already loaded when I press the combobox. It's a simple JSON with 'id' and 'name' properties.

EDIT2: I've tried this for my Jurisdictions because I wasn't getting the right data selected in combobox. This is inside my controller.

onJurisdictionComboRender: function(combobox, eOpts){

        // Getting the selected row.
        var record = this.grid.getSelectionModel().getSelection()[0];

        // Selected jurisdiction.
        var jurisdiction = record.data.jurisdiction_id;

        // Select it in combobox.
        combobox.select(jurisdiction);
    }

can you show the code where it is being used? does the combo have a default value? — Arun V
Can you also show the definition of App.store.Jurisdictions? Does it have the data you mention in your question hardcoded? — Ben
Could you please share the code for App.store.Jurisdictions and its model? — Izhaki

sra sra · Accepted Answer · 2013-03-28T07:33:02

That doesn't make sense... If you read out the combo the correct way, meaning let either the form doing the work or calling getSubmitValue() on your own the combo would always returning the valueField. hiddenName is used for other purposes. Please take a look at the console of this JSFiddle and recheck how you fetch the combo value.

Here's the working demo-code

// The data store containing the list of states
var roles = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data : [
        {"id":1, "name":"Administrator"},
        {"id":2, "name":"User"},
        {"id":3, "name":"Guest"}
        //...
    ]
});

// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose Role',
    store: roles,
    queryMode: 'local',
    editable: false,
    displayField: 'name',
    valueField: 'id',
    renderTo: Ext.getBody()
});

combo.on('select', function(cb){ console.log(cb.getSubmitValue()); })

Ext-JS 4 - strange behavior with submitting combobox to server

2 Answers