Results 1 to 10 of 10

Thread: 4.0 ComboBox missing hiddenName config parameter

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    51
    Vote Rating
    16
      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 User arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Vote Rating
    77
      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
      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 User arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Vote Rating
    77
      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
      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 User arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Vote Rating
    77
      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 User arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Vote Rating
    77
      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
      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
      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
      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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •