I am in the process of configuring an ExtJS combobox to return the value instead of the display value.
My issue arises when using ajax to fetch data for the combobox field and simultaneously utilizing getForm().load to load the selected values. In my model, I have specified a display value and a code value, where the display value is assigned to 'name' and the code value is assigned to 'hiddenName'. However, upon submitting the data, it appears that the display value is being submitted instead of the code value from the 'hiddenName' field.
Interestingly, after changing the selection in the combobox, the code value is correctly submitted.
The following is the code snippet:
{
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%'
},
Another point to note is that when setting the 'name' to 'DataTypeCde', the code value is displayed correctly. However, once the ajax data for the combobox is loaded, the display value gets replaced by the original display value.
Therefore, I need either the 'hiddenName' to load the DataTypeCde value and submit it back or find a way for the combobox data to preload on form render.
If anyone can provide insight into achieving this or identify any flaws in my approach, it would be greatly appreciated.
Update: *Update4: (added POST response sample)*
Allow me to clarify further what I aim to accomplish.
(1) With the current code configuration, the following scenario unfolds... If DataType = Shopping and DataTypeCde = SP the combobox displays Shopping upon rendering, which is the desired behavior. However, upon submitting this data to the controller, "Shopping" is returned instead of "SP," which is undesired.
Example of POST response...
id=1&DataType=Shopping
(2) Setting the name field as "DataTypeCde" results in the following outcome... If DataType = Shopping and DataTypeCde = SP the combobox displays SP after rendering, which is not ideal as I prefer to show the text rather than the code. Yet, upon submitting the data to the controller, the code "SP" is returned as intended.
Example of POST response...
id=1&DataTypeCde=SP
(3) Opting for the second method of naming the field "DataTypeCde" leads to the code being shown until the combobox data loads. To address this issue, I enabled the "autoLoad" feature, causing the combobox data to load automatically at render. However, loading all comboboxes initially significantly slows down page load.
Example of POST response...
id=1&DataTypeCde=SP
(Q) My inquiry is... Is there a way to display the text value in the combobox without preloading the data but still have the code value posted back instead of the display value?
Update2:
Apologies for not mentioning earlier, I am utilizing ASP.NET MVC4 with ExtJs. When referring to returning the post response to the controller, I mean the MVC controller. Initially, I did not think the backend details were relevant to this query.
Update3:
To provide a more comprehensive view of the implementation, below is the code and data sample used to load the form.
example2.getForm().load({
url: '@Url.Content("~/{URL}/Data/")',
params: {
id: window.record.data['id']
},
method: 'POST'
});
The above fetches a collection of JSON objects similar to this...
{"success":true,"data":{"id":"1","DataType":"Shopping","DataTypeCde":"SP"}}
Here's the code to retrieve the data for the combo box...
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']
}),
With the resulting JSON object structured as follows...
[{"Id":"SP","Name":"Shopping"}]
Thank you.