Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1023 in a recent build.
  1. #1
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    111
    Vote Rating
    1
    stan229 is on a distinguished road

      0  

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

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


    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:
    Code:
     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

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you for the report.

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Touch Premium Member
    Join Date
    Jan 2010
    Posts
    2
    Vote Rating
    0
    tim1491 is on a distinguished road

      0  

    Default


    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:

    Code:
    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
    Code:
    {
        "items":[
            {"text":"first","value":"1"},
            {"text":"second","value":"2"}
        ]
    }
    Attached Images

  5. #5
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


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

    Code:
    Ext.define('MyModel', {
        extend: 'Ext.data.Model',
    
        config: {
            fields: ['text', 'value']
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.