Ajax – ExtJS Combobox posting hiddenName value

ajaxcomboboxextjsextjs4.1

I am trying to get ExtJS combobox to return value instead of display value.

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.

After changing the selection of the combobox, the code value is being submitted.

Here's the 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%'
        },

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.

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.

Can someone point out if there's a way or what I'm doing wrong to prevent the code value from being post back.

Update:
*Update4: (added POST response sample)*

Let me explain better of what I'm trying to achieve.

(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.

Example of POST response…

id=1&DataType=Shopping

(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.

Example of POST response…

id=1&DataTypeCde=SP

(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.

Example of POST response…

id=1&DataTypeCde=SP

(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.

Update2:

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.

Update3:

To give a even bigger picture of my implementation here's the code and data sample that I use to load the form.

    example2.getForm().load({
    url: '@Url.Content("~/{URL}/Data/")',
    params: {
        id: window.record.data['id']
    },
    method: 'POST'
});

The above loads a collection of json object similar to this…

{"success":true,"data":{"id":"1","DataType":"Shopping","DataTypeCde":"SP"}}

Here's the code to ajax 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 result json object like this…

[{"Id":"SP","Name":"Shopping"}]

Thanks

Best Answer

I am not quite sure what you really want...

name This is used as the parameter name when including the field value in a form.submit(). If no name is configured, it falls back to the inputId. To prevent the field from being included in the form submit, set submitValue: false (this works for any fieldtype).

hiddenName The name of an underlying hidden field which will be synchronized with the underlying value of the combo.

valueField Name of the underlying field which contains the value to submit along with the name property.

displayField Name of the underlying field which contains the value to display.

With your setup you should submit two values:

submitValue: true

DataType with the value of the valueField (*To prevent set submitValue: false *)
DataTypeCde with the value of the displayField (To prevent remove the hiddenName)

Comments based on the edit

...submit this result back to the controller...

What do you mean with submit to controller? Your problem sounds uncommon and I think you just doing it the wrong way... Is 'Shopping' the value of the Name field of your store and SD tha value of the Id field?

Edit

Is there a way to set the display value to show for the combobox without loading the combobox data

Basically not... you can set the value property which is the one that get displayed but that would be one that get committed in that case.

but have the code value get posted back instead of the display value.

No. There is no Code Value. Basically there is one valueField which will be the value of the field.

For the following I assume the combo store is loaded with the following values {"id":"SP","Name":"Shopping"}

The field behaves like a native HTML field which means you have a name and a value when receiving the values. Now when you you use the hiddenName, in your case DataType along with the name, in your case DataTypeCde you are able to set this field by DataType=SP which would cause to display Service. Why -> the value cause a lookup within the store. If the record is not found the key will get displayed instead. That means if you would set this combo with DataType=AP not value could be found which would cause the combo to display AP.

Your return

{"success":true,"data":{"id":"1","DataType":"Shopping","DataTypeCde":"SP"}}

contains duplicate data. You should only submit the combo name along with the valueField value. It should look like

{"success":true,"data":{"id":"1","DataType":"SP"}}

This would cause the combo to display Shopping cause it will automaticly lookup within the store for the key SP

And not to forget:

It is not recommend to use string as Id fields.
The default idProperty is set to id. In your case this may cause any lookup to fail. I recommend you set the idProperty within the store reader to idProperty: 'Id'

reader: { type: 'json', idProperty: 'Id' }

Related Solutions

JavaScript/jQuery to download file via POST with JSON data

letronje's solution only works for very simple pages. document.body.innerHTML += takes the HTML text of the body, appends the iframe HTML, and sets the innerHTML of the page to that string. This will wipe out any event bindings your page has, amongst other things. Create an element and use appendChild instead.

$.post('/create_binary_file.php', postData, function(retData) {
  var iframe = document.createElement("iframe");
  iframe.setAttribute("src", retData.url);
  iframe.setAttribute("style", "display: none");
  document.body.appendChild(iframe);
});

Or using jQuery

$.post('/create_binary_file.php', postData, function(retData) {
  $("body").append("<iframe src='" + retData.url+ "' style='display: none;' ></iframe>");
});

What this actually does: perform a post to /create_binary_file.php with the data in the variable postData; if that post completes successfully, add a new iframe to the body of the page. The assumption is that the response from /create_binary_file.php will include a value 'url', which is the URL that the generated PDF/XLS/etc file can be downloaded from. Adding an iframe to the page that references that URL will result in the browser promoting the user to download the file, assuming that the web server has the appropriate mime type configuration.

Css – How to get an ExtJS ComboBox to display inline with text

The simplest way to do this is to override the styles on the page.

First, wrap your paragraph in a P tag with a special id.

<p id="my-inline-override">
  Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
</p>

Then you can add a CSS selector to your page that makes sure the DIV tag added by Ext JS displays inline (note that "x-form-field-wrap" is the class of the inserted DIV wrapper, you can see this if you use chrome developer tools to browse the DOM).

<style>
#my-inline-override div.x-form-field-wrap {
    display: inline;
}
</style>

Best Answer

Related Solutions

JavaScript/jQuery to download file via POST with JSON data

Css – How to get an ExtJS ComboBox to display inline with text

Related Topic