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

      0  

    Default 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 - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,416
    Vote Rating
    55
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      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.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    51
    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 - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,416
    Vote Rating
    55
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      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

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    51
    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 - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,416
    Vote Rating
    55
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      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.

  7. #7
    Sencha - Tools Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,416
    Vote Rating
    55
    arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice arthurakay is just really nice

      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.

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    51
    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
    51
    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