Select field can't have 0 as value

[jweber]

REQUIRED INFORMATION


Ext version tested:

• Sencha Touch 2.0.1

Browser versions tested against:

• Safari 5.1.5

DOCTYPE tested against:

• html

Description:

• If a selectfield has an option whose value is the number 0, and you set the default value of the selectfield to the number 0, the value won't be stored. It won't show any option selected.

Steps to reproduce the problem:

• Run the code below

The result that was expected:

• The "zero" text appears in the field, and getValue() returns 0.

The result that occurs instead:

• The "select one" text appears in the field, and getValue() returns null.

Test Case:

Ext.define('MyForm', {
	extend: 'Ext.form.Panel',
	config: {
		fullscreen: true,
		items: [{
			itemId: 'x',
			xtype: 'selectfield',
			placeHolder: 'select one',
			name: 'x',
			label: 'x',
			value: 0,
			options: [
				{text: 'zero', value: 0},
				{text: 'one', value: 1}
			]
		}]
	}
});
var form = Ext.create('MyForm');

HELPFUL INFORMATION


Screenshot or Video:

• N/A

See this URL for live test case: N/A


Debugging already done:

• Works if you use strings, e.g. "0". I'm not sure if integers are allowed as values.

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Mac OS 10.7.3

[mitchellsimoens]

It works if you select one and then select zero but not initial value. Thanks for the report.

[FrankK]

I had the same issue. Not sure if this was the best way to handle it, but this override worked for me. I only changed the one line where it checks if value is true. It's not true if the value is zero so it looks like that's what's causing the issue.

Ext.define('TP.extend.override.Select', {
    override: 'Ext.field.Select',
    applyValue: function(value) {
        var record = value,
            index, store;


        //we call this so that the options configruation gets intiailized, so that a store exists, and we can
        //find the correct value
        this.getOptions();


        store = this.getStore();
        //OVERRIDE NEXT LINE
        //if ((value && !value.isModel) && store) {
        if ((value != undefined && value != null && !value.isModel) && store) {
            index = store.find(this.getValueField(), value, null, null, null, true);


            if (index == -1) {
                index = store.find(this.getDisplayField(), value, null, null, null, true);
            }


            record = store.getAt(index);
        }


        return record;
    }
});

[tareed]

I can confirm the bug and that the FrankK fix works. Using strings and setting the initial value to non zero does not solve the problem.

Thanks to FrankK !

[themightychris]

There are two bugs here:

1) That which FrankK fixed, where falsey values won't get looked up in the store
2) applyValue and updateValue pass unmatched values through to this.record as-is. getValue has logic to check if this.record is a model before calling .get() on it. The showPicker method however does not use getValue and assumes this.record is a model with this line:

value[name] = this.record.get(this.getValueField());

showPicker should call this.getValue on the right instead to prevent hard JS errors when showing a picker with an unmatched value

Update: Here's my patch that fixes both issues

[rdougan]

Fixed for the next release. Thanks for the patches.