Select Field with AJAX Store (with Model) behind it does not display selected item

[stan229]

REQUIRED INFORMATION Ext version tested:

• Sencha Touch 2.0 rev PR2

Browser versions tested against:

• Chrome 15
• Safari 5

DOCTYPE tested against:

• html5

Description:

• When there is an AJAX (rest) store behind a selectfield, it loads the data fine.
• However when you select the item from the picker it does not populate the display field and does not set the value.

Steps to reproduce the problem:

• Render selectfield in a formpanel.
• Select item from select picker

The result that was expected:

• Item selected would be displayed in the field
• Item selected would be added to the backing form values.

The result that occurs instead:

• Item selected not displayed in the field.
• form.getValues() shows item value as null
• Side Note: The layout seems to be a bit weird also. Note how zip code does not have a bottom border and it looks like the label 'starts over'. Am I not using hbox properly?

Test Case:

 Ext.define('SuperQualifier.model.Location', {
    extend : 'Ext.data.Model',
    fields : [{
        name : 'locationName',
        type : 'string'
    }, {
        name : 'id',
        type : 'int'
    }],
    proxy : {
        type : 'rest',
        url : '../loanQualifier/getLocationTypes',
        reader : {
            type : 'json',
            root : ''
        }
    }
})

Ext.define('SuperQualifier.store.Locations', {
    extend : "Ext.data.Store",
    model : 'SuperQualifier.model.Location',
    requires : 'SuperQualifier.model.Location',
    // data : [{
        // locationName : 'Test',
        // id : 1
    // }, {
        // locationName : 'ABc',
        // id : 2
    // }]
})

Ext.setup({
    onReady : function() {
        var locationsStore = Ext.create('SuperQualifier.store.Locations');
        locationsStore.load()
        var popup = Ext.create('Ext.Panel', {
            modal : true,
            centered : true,
            layout : 'fit',
            width : 750,
            height : 350,
            hideOnMaskTap : false,
            scrollable : false,
            alias : 'widget.addpropertypopup',
            items : [{
                docked : 'top',
                xtype : 'toolbar',
                title : 'New Property'
            }, {
                xtype : 'formpanel',
                scrollable : false,
                items : [{
                    xtype : 'fieldset',
                    instructions : 'Please fill out above information.',
                    items : [{
                        xtype : 'textfield',
                        name : 'address',
                        label : 'Address',
                        required : true,
                        autoCapitalize : true,
                    }, {
                        layout : 'hbox',
                        items : [{
                            xtype : 'textfield',
                            name : 'city',
                            label : 'City',
                            required : true,
                            flex : 2,
                            autoCapitalize : true,
                        }, {
                            xtype : 'textfield',
                            name : 'state',
                            label : 'State',
                            flex : 1,
                            labelWidth : '50%',
                            required : true
                        }, {
                            xtype : 'numberfield',
                            name : 'zip',
                            label : 'Zip',
                            flex : 1,
                            required : true
                        }]
                    }, {
                        xtype : 'selectfield',
                        name : 'location',
                        label : 'Location',
                        displayField : 'locationName',
                        valueField : 'id',
                        store : locationsStore
                    }]
                }, {
                    layout : 'hbox',
                    defaults : {
                        xtype : 'button',
                        flex : 1,
                        style : 'margin: .5em'
                    },
                    items : [{
                        ui : 'confirm-round',
                        text : 'Add',
                        id : 'addpropertybutton',
                        handler : function() {
                            that.submitAddPropertyForm(popup.down('formpanel'))
                        }
                    }, {
                        ui : 'round',
                        text : 'Cancel',
                        id : 'canceladdpropertybutton',
                        handler : function() {
                            popup.hide()
                            popup.destroy()
                        }
                    }]
                }]
            }],
        });
        popup.show()
    }
});

HELPFUL INFORMATION

[Jamie Avins]

Thank you for the report.

[rdougan]

Good find. I've updated the component to take remote stores into account, yet still allowing for the value config to work as it should.

[tim1491]

I am using Touch 2.0 RC, and the data returned from the ajax call doesn't seem to be rendered properly in the selection list. The items were listed as "blank" (please see the attached screen shot).

Did I miss anything?

Here is my testing codes and data:

Ext.setup({
    onReady: function() {
        Ext.define('TestModel', {
            extend:'Ext.data.Model',
            fields: [
                {name:'text'},
                {name:'value'}
            ]
        });
        var testStore = Ext.create('Ext.data.Store', {
            autoLoad:true,
            model:'TestModel',
            proxy: {
                type:'ajax',
                url:'test.json',
                  reader: {
                      type:'json',
                      rootProperty:'items'
                  }
              }
        });

        var form = Ext.create('Ext.form.Panel', {
            scroll:'vertical',
            url:'',
            fullscreen:true,
            items: [{
                xtype:'fieldset',
                title:'Test Form',
                defaults: {
                    labelAlign:'left'
                },
                items: [{
                    xtype:'selectfield',
                    label:'Item',
                    valueField:'value',
                    displayField:'text',
                    placeHolder: 'Select something...',
                    store:testStore
                }]
            }]
        });
        form.show();
    }
});

test.json

{
    "items":[
        {"text":"first","value":"1"},
        {"text":"second","value":"2"}
    ]
}

[rdougan]

When using Ext.define, all configs need to go inside the config block:

Ext.define('MyModel', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['text', 'value']
    }
});