title: ExtJS Combobox posting hiddenName value
body: <p>I am trying to get ExtJS combobox to return value instead of display value.</p>
  
  <p>Here's my problem.  I am using ajax to get the data for the combobox field, and in the same time using getForm().load to load the selected values for the combobox.  In the model I've return a display value and code value.  Display value is assigned to 'name' and code value is assigned to 'hiddenName'.  When I submit the data, the display value is being submitted not the code value from 'hiddenName' field.</p>
  
  <p>After changing the selection of the combobox, the code value is being submitted.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>{
              xtype: 'combobox',
              fieldLabel: 'Type',
              name: 'DataType',
              hiddenName: 'DataTypeCde',
              store: Ext.create('Ext.data.JsonStore', {
                  proxy: {
                      type: 'ajax',
                      actionMethods: { create: 'POST', read: 'POST', update: 'POST', destroy: 'POST' },
                      url: '@Url.Content("~/{URL}/DataType")',
                      reader: {
                          type: 'json'
                      }
                  },
                  fields: ['Id', 'Name']
              }),
              valueField: 'Id',
              displayField: 'Name',
              typeAhead: true,
              mode: 'remote',
              emptyText: 'Select a data type...',
              anchor: '96%'
          },
  </code></pre>
  
  <p>Another thing is that, when I set the 'name' to be 'DataTypeCde' the code value get display, but once the ajax data for the combobox get loaded, display value then get replaced by the display value.  </p>
  
  <p>So I can either get 'hiddenName' to load the DataTypeCde value and have this value post back, or get the combobox data to pre load on form render.</p>
  
  <p>Can someone point out if there's a way or what I'm doing wrong to prevent the code value from being post back.</p>
  
  <p><strong>Update:</strong>
  *<em>Update4: (added POST response sample)</em>*</p>
  
  <p>Let me explain better of what I'm trying to achieve.</p>
  
  <p>(1) With the code above the follow will be displayed...
  if DataType = Shopping and DataTypeCde = SP
  the combobox after rendering will show Shopping, which is how I want this to be.
  But once I submit this result back to the controller, the "Shopping" is being returned instead of "SP"... this is not what I want.</p>
  
  <p>Example of POST response...</p>
  
  <blockquote>
    <p><code>id=1&amp;DataType=Shopping</code></p>
  </blockquote>
  
  <p>(2) With the name field set to "DataTypeCde" this will be the following result...
  if DataType = Shopping and DataTypeCde = SP
  the combobox after rendering will show SP, which is not what I want as I want to display the text not the code.
  But once I submit the result back to the controller, the code "SP" is returned, which is how I intended.</p>
  
  <p>Example of POST response...</p>
  
  <blockquote>
    <p><code>id=1&amp;DataTypeCde=SP</code></p>
  </blockquote>
  
  <p>(3) By using the second method of setting name field to "DataTypeCde" we will get the result of code display until the combobox data get loaded.  So to solve this issue I've set the "autoLoad" feature to true, so the combobox data will get loaded at render automatically.  At this point ExtJS will replace the "SP" code displaying to the display value of "Shopping".
  But one problem with this solution is that requiring all the combobox to load at the start will slowdown the page load significantly.</p>
  
  <p>Example of POST response...</p>
  
  <blockquote>
    <p><code>id=1&amp;DataTypeCde=SP</code></p>
  </blockquote>
  
  <p>(Q) My question is... Is there a way to set the display value to show for the combobox without loading the combobox data, but have the code value get posted back instead of the display value.</p>
  
  <p><strong>Update2:</strong></p>
  
  <p>Sorry for the confusion, I forgot to mention I'm using ASP.NET MVC4 with ExtJs.  In the case where I mention returning the post response to controller.  I mean the MVC controller.  I didn't think the back-end would be relevant to this question.</p>
  
  <p><strong>Update3:</strong></p>
  
  <p>To give a even bigger picture of my implementation here's the code and data sample that I use to load the form.</p>
  
  <pre><code>    example2.getForm().load({
      url: '@Url.Content("~/{URL}/Data/")',
      params: {
          id: window.record.data['id']
      },
      method: 'POST'
  });
  </code></pre>
  
  <p>The above loads a collection of json object similar to this...</p>
  
  <blockquote>
    <p><code>{"success":true,"data":{"id":"1","DataType":"Shopping","DataTypeCde":"SP"}}</code></p>
  </blockquote>
  
  <p>Here's the code to ajax the data for the combo box...</p>
  
  <pre><code>store: Ext.create('Ext.data.JsonStore', {
              proxy: {
                  type: 'ajax',
                  actionMethods: { create: 'POST', read: 'POST', update: 'POST', destroy: 'POST' },
                  url: '@Url.Content("~/{URL}/DataType")',
                  reader: {
                      type: 'json'
                  }
              },
              fields: ['Id', 'Name']
          }),
  </code></pre>
  
  <p>With the result json object like this...</p>
  
  <blockquote>
    <p><code>[{"Id":"SP","Name":"Shopping"}]</code></p>
  </blockquote>
  
  <p>Thanks</p>