1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    50
    Vote Rating
    16
    stevo.zilik will become famous soon enough

      0  

    Default 4.0 ComboBox missing hiddenName config parameter

    4.0 ComboBox missing hiddenName config parameter


    Hi,

    I need a combo that updates a form field (input hidden/text, I don't really care) with the selected Value not the Display Text. In Ext.Js 3.x there was a hiddenName config property which has been removed in 4.x. How to achvieve same behavior in 4.x?

    there is a nice comparison on page 52 here: http://www.slideshare.net/edspencer/intro-to-ext-4

    Thanks,
    Stevo

  2. #2
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,353
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    Does the "name" property not do what you want? I'm afraid I don't understand... post some example code and specify the issue you're unable to solve.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    50
    Vote Rating
    16
    stevo.zilik will become famous soon enough

      0  

    Default


    Quote Originally Posted by arthurakay View Post
    Does the "name" property not do what you want? I'm afraid I don't understand... post some example code and specify the issue you're unable to solve.
    Name property just changes the name of the posted field, it doesn't switch the value from 'Display' Value to 'Value' Value.

    run this:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ComboTest</title>
        <link href="Content/ext-all-default.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/ext-all-debug.js" type="text/javascript"></script>
    </head>
    <body>
        <form action="ComboTest.htm">
            <div id="comboAnchor"></div>
            <script type='text/javascript'>
                var states = Ext.create('Ext.data.Store', {
                            fields: ['abbr', 'name'],
                            data: [
                    { "abbr": "AL", "name": "Alabama" },
                    { "abbr": "AK", "name": "Alaska" },
                    { "abbr": "AZ", "name": "Arizona" }
                            //...
                ]
                });
    
                // Create the combo box, attached to the states data store
                Ext.create('Ext.form.ComboBox', {
                    fieldLabel: 'Choose State',
                    store: states,
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'abbr',
                    name: 'State',
                    renderTo: 'comboAnchor'
                });
            </script>
            <input type="submit" value="submit" />
        </form>
    </body>
    </html>
    (you'll need to amend the link to the ext.js .css and .js files in the head and the form action to point to your file)

    submit the form and inspect the data sent. What you will see that there will be a 'State' field with the value that you selected in the combo. However the value will be one of the 'name' values (Alabama, Alaska,Arizona) and I need to retrieve the 'abbr' value (AL, AK, AZ).

    Hope this clarifies my issue,
    Stevo

  4. #4
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,353
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    I think the issue stems from your example... you're not using ExtJS to build the form or submit the value.

    Just moving your code into an ExtJS form, things seem to work just fine.

    PHP Code:
        var states Ext.create('Ext.data.Store', {
            
    fields: ['abbr''name'],
            
    data: [
                { 
    "abbr""AL""name""Alabama" },
                { 
    "abbr""AK""name""Alaska" },
                { 
    "abbr""AZ""name""Arizona" }
            ]
        });

        var 
    box Ext.create('Ext.form.ComboBox', {
            
    fieldLabel   'Choose State',
            
    store        states,
            
    queryMode    'local',
            
    displayField 'name',
            
    valueField   'abbr',
            
    name         'State'
        
    });

        var 
    form Ext.create('Ext.form.Panel', {
            
    height   100,
            
    width    300,
            
    renderTo Ext.getBody(),

            
    url      '.'//submit form to the current page
            
    method   'POST',

            
    items    : [ box ],
            
    buttons  : [{
                
    text    'Submit',
                
    handler : function() {
                    
    form.submit();
                }
            }]
        }); 
    Last edited by arthurakay; 18 Aug 2011 at 7:05 AM. Reason: copy/paste killed the code sample
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    50
    Vote Rating
    16
    stevo.zilik will become famous soon enough

      0  

    Default


    Yes we are not using Ext.js forms, we are building and Asp.net mvc application.

    Correct me if I'm wrong but the ComboBox is a standalone control and thus should operate under standard html form? In the previous version of Ext.js, this used to work.

  6. #6
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,353
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    I see what you mean... there doesn't appear to be an equivalent config for "hiddenName".

    The API makes me believe this functionality should be taken directly from the "name" config but in your case it seems to be forgotten. Diving into the source code directly, I don't immediately see how/where this should happen.

    I'll move this into the bugs forum and submit to our tracker. If you need immediate assistance, please create a ticket via support.sencha.com and link back to this thread.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  7. #7
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,353
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    Actually... reading an existing ticket in our bug tracker, I see this was a design decision by the engineering team. I asked the bug I created be closed as a duplicate.

    It looks like you have several options:
    - convert your form to an ExtJS component
    - use an HTML onSubmit() method to catch the submission and grab the correct value
    - use a "select" event on your combo to populate a hidden field

    It doesn't look like this is something that ExtJS will support moving forward.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    50
    Vote Rating
    16
    stevo.zilik will become famous soon enough

      0  

    Default


    Thanks for support arthurakay,

    I've already implemented the 3) 'select' event.

    It's a shame though, removing valuable functionality that has been implemented already.

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    al3x52 is on a distinguished road

      0  

    Default


    Hi stevo,
    Could you post the code you use to make the ComboBox send the valueField instead of the DisplayField ?
    thanks

  10. #10
    Sencha User
    Join Date
    Aug 2011
    Posts
    50
    Vote Rating
    16
    stevo.zilik will become famous soon enough

      0  

    Default


    Hi sure,

    Code:
    var states = Ext.create('Ext.data.Store', {
                            fields: ['abbr', 'name'],
                            data: [
                    { "abbr": "AL", "name": "Alabama" },
                    { "abbr": "AK", "name": "Alaska" },
                    { "abbr": "AZ", "name": "Arizona" }
                            //...
                ]
                });
    
                // Create the combo box, attached to the states data store
                Ext.create('Ext.form.ComboBox', {
                    fieldLabel: 'Choose State',
                    store: states,
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'abbr',
                    value: 'AZ',
                    name: 'State',
                    listeners: {
                        'select': function (field, newValue) {
                            alert(newValue[0].raw.abbr); 
                        }
                    },
                    renderTo: 'comboAnchor'
                });
    instead of the alert, insert a value into a hidden field e.g. http://www.dynamicdrive.com/forums/a...p/t-19734.html

    Best Regards,
    Stevo

Thread Participants: 2

Tags for this Thread