This duplicates another bug already reported in our system: TOUCH-1277
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Vote Rating
    3
    olouvignes is on a distinguished road

      0  

    Default [PR3] selectfield does not defaults to 'value' config correctly

    [PR3] selectfield does not defaults to 'value' config correctly


    selectfield does not defaults to 'value' config correctly.

    Check @bug3 comments in test case (multiple bugs).

    TEST CASE


    Code:
    window.d = true;
    
    Ext.define('MyApp.element.card.phoneNumber', {
    
    
        alias: 'widget.phoneNumber',
        extend: 'Ext.field.Text',
    
    
        config: {
            label: 'home',
            //labelAlign: 'left',
            //labelWidth: '90px',
            placeHolder: 'phone',
            enableKeyEvents: true,
            //useClearIcon: true
        },
    
    
        initialize: function() {
            d&&console.log(Ext.getDisplayName(arguments.callee), [this, arguments]);
    
    
            this.on({
                change: 'onChange',
                blur: 'onBlur',
                keypress: 'onKeyPress',
                keyup: function() { console.log('onKeyUp'); }, // @bug2 never fired -> works on PR3
                painted: 'onPainted'
            });
    
    
            this.callParent();
    
    
        },
    
    
        onChange: function() { console.log('onChange'); },
        onBlur: function() { console.log('onBlur'); },
        onKeyPress: function() { console.log('onKeyPress'); },
        onKeyUp: function() { console.log('onKeyUp'); },
        onPainted: function() { console.log('onPainted'); }
    
    
    });
    
    
    Ext.define('MyApp.MyModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name: "type", type: "string"},
            {name: "status", type: "string"},
        ],
        proxy: {
            type: 'rest',
            url : '/models',
            reader: {
                type: 'json',
                root: 'data'
            }
        }
    });
    
    
    
    
    Ext.define('MyApp.view.MyForm', {
    
    
        id: 'my-form',
        alias: 'widget.my-form',
        extend: 'Ext.form.FormPanel',
        requires: [],
    
    
        config: {
            items:[{
                xtype: 'navigationbar',
                title: 'MyApp',
                docked: 'top',
            }]
        },
    
    
        initialize: function() {
            d&&console.log(Ext.getDisplayName(arguments.callee), [this, arguments]);
            var self = this;
    
    
            // Configure component
            this.add([{
                xtype: 'fieldset',
                id: 'LoginFieldset',
                title: 'Login',
                //instructions: 'login into app.',
                items: [
                {
                    xtype: 'emailfield',
                    placeHolder: 'email',
                    name: 'email',
                    id: 'email',
                    required: true,
                    listeners: {
                        keyup: function() {
                            console.warn('onKeyUp'); // Working
                        }
                    }
                },
                {
                    xtype: 'phoneNumber' // @bug2 onKeyUp not working
                },
                {
                    xtype: 'selectfield',
                    name: 'foo',
                    value: 'third',
                    options: [
                        {text: 'First Option',  value: 'first'}, // @bug3 instead this is selected
                        {text: 'Second Option', value: 'second'},
                        {text: 'Third Option',  value: 'third'} // @bug3 this should be selected
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Test',
                    ui: 'confirm',
                    action: 'test',
                    style: 'margin:2%;',
                    handler: function() {
    
    
                        console.warn('bug1', self.getValues()); // @bug1 selectfield foo is now a whole record instead of a string!
    
    
                        var soonToBeBrokenModel = Ext.create('MyApp.MyModel');
                        soonToBeBrokenModel.data.status = self.getValues(); // I want to update it!
                        console.warn(soonToBeBrokenModel); // @bug1 sth tells me that this will certainly break on serialization.
    
    
                        soonToBeBrokenModel.save(); // @bug1 kaboum! --> Uncaught RangeError: Maximum call stack size exceeded
    
    
                    }
                }
                ]}
            ]);
    
    
            this.callParent();
        }
    
    
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you have a value, then the corresponding row in the list should be selected. Based on your comments, 'Third Option' should be selected.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Vote Rating
    3
    olouvignes is on a distinguished road

      0  

    Default


    Hum, totally mixed my comments inside the code there, i do get "First Option" selected, and as you said, I should have the third one.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    repthe415 is on a distinguished road

      0  

    Default Got the same issue...

    Got the same issue...


    ... i need it to work, otherwise i need to stop trying to use sencha touch

    Code:
    ....
    value: 'DE',
    options: [
      { text: 'Belgium', value: 'BE' },
      { text: 'Germany', value: 'DE' },
      .....
    ],
    .....
    Always uses the first options. Did try with PR1 and PR3, still the same. Would be nice to have a patch for this issue.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    repthe415 is on a distinguished road

      0  

    Default I hope this is better?!

    I hope this is better?!


    REQUIRED INFORMATION

    Sencha Touch version tested:
    • Sencha Touch 2.0 PR3
    Browser versions tested against:
    • CHROME
    DOCTYPE tested against:
    • HTML5
    Description:
    • default value not being selected in selectfield.
    Steps to reproduce the problem:
    • just create a simple selectfield with 2 options and set the value property of the selectfield to the value of the second item inside the options. the first item is always selected
    The result that was expected:
    • the second item was supposed to be selected
    The result that occurs instead:
    • fist item being selected
    Test Case:
    Code:
    var selectField = {
        xtype: 'selectfield',
        id: 'CountryId',
        name: 'country_id',
        label: 'Country',
        value: 'DE',
        options: [
            { text: 'Belgium', value: 'BE' },
            { text: 'Germany', value: 'DE' }
        ],
        required: true
    };

    HELPFUL INFORMATION
    Operating System:
    • Win 7

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    repthe415 is on a distinguished road

      0  

    Default And still need to append some more info...

    And still need to append some more info...


    • data[TransactionsSession][sender_country_id]:
      true
    • data[TransactionsSession][sender_country_id]:
      ext-record-1
    • data[TransactionsSession][sender_country_id]:
    • data[TransactionsSession][sender_country_id]:
      [object Object]
    • data[TransactionsSession][sender_country_id]:
      [object Object]
    • data[TransactionsSession][sender_country_id]:
      false
    • data[TransactionsSession][sender_country_id]:
      false
    • data[TransactionsSession][sender_country_id]:
      Ext.data.Store.ImplicitModel-ext-element-1-ext-record-1
    • data[TransactionsSession][sender_country_id]:
      [object Object]
    • data[TransactionsSession][sender_bank_code]:

      This is being sent on submit when having a value field set.... (above)
    • Below you see what being sent when no value field is included....
    • data[TransactionsSession][sender_country_id]:
      BE
    • data[TransactionsSession][sender_bank_code]:


      But maybe this is my fault, but not sure....

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Vote Rating
    3
    olouvignes is on a distinguished road

      0  

    Default


    The broken solution for now is to use defaultValue instead of value in your config. And to apply theses defaultValues manually at the end of your initialize().

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    repthe415 is on a distinguished road

      0  

    Default


    so you say use

    defaultValue: 'DE',

    instead of

    value: 'DE',

    ??

    How do I apply after initialization? I also have a handler on the "onchange" and I dont want that to trigger...

  9. #9
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    187
    Vote Rating
    3
    olouvignes is on a distinguished road

      0  

    Default


    Exactly, if you don't use the value param in the config, getter & setter will work correctly. So you just have to do sth like this (when you update the record, so at each new record load, defaults get correctly set).

    Code:
    // Fix selectfields
            var selectFields = this.query('.selectfield');
            _.each(selectFields, function(selectField, i) {
                if(selectField.hasOwnProperty('defaultValue')) {
                    selectField.setValue(selectField.defaultValue);
                }
            });
    this being the formpanel. _.each comes from the underscore.js library, you can probably achieve the same thing using Ext.each or native for x in y code.

  10. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    5
    Vote Rating
    0
    repthe415 is on a distinguished road

      0  

    Wink


    Thanks a lot.... helped and worked.. for anyone else with the same.. here is my working code

    Code:
    ... part of select field
        defaultValue: '<?php echo $this->data['...']['sender_country_id'] ?>',
        options: [
            <?php foreach ($countries as $countryId => $countryName): ?>
                {
                    text: '<?php echo $countryName ?>',
                    value: '<?php echo $countryId ?>',
                },
            <?php endforeach ?>
        ],
        required: true,
        disabled: <?php echo $fixed['locked_sender_bank_code'] ? 'true' : 'false' ?>,
        listenerFix: {
            change: function(field, newValue, oldValue) {
                panelFormSubmit();
            }
        },
    ...
    
    // Fix selectfields
    var selectFields = panelForm.query('.selectfield');
        
    Ext.each(selectFields, function(selectField, i) {
        if (selectField.hasOwnProperty('defaultValue'))        
            selectField.setValue(selectField.defaultValue);
        if (selectField.hasOwnProperty('listenerFix')) 
            selectField.addListener(selectField.listenerFix);
    });
    
    // this willl add the listeners from listenerFix to regular field listeners...