Results 1 to 6 of 6

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

    Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1023 in Sprint 11.
  1. #1
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
      0  

    Default 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 User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    Thank you for the report.

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Vote Rating
    7
      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
      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 Attached Images

  5. #5
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Vote Rating
    7
      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.

  6. #6
    Sencha User
    Join Date
    May 2015
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Is select-field working or not..

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •