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

[olouvignes]

selectfield does not defaults to 'value' config correctly.

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

TEST CASE

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();
    }


});

[mitchellsimoens]

If you have a value, then the corresponding row in the list should be selected. Based on your comments, 'Third Option' should be selected.

[olouvignes]

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.

[repthe415]

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

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

[repthe415]

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:

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 INFORMATIONOperating System:

• Win 7

[repthe415]

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

[olouvignes]

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

[repthe415]

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

[olouvignes]

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

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

[repthe415]

Thanks a lot.... helped and worked.. for anyone else with the same.. here is my working 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...