CODEWITHSUNDEEP
sencha-touch
Hard worker
Hard worker

Reputation: 4046

How to use setOptions method of select field with a store

I can use the setOptions method to successfully specify the options of a select field as follows:

setOptions(
[   {text: 'First Option',  value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option',  value: 'third'}
])

However, I would instead like setOptions to work with a loaded data store rather than hard coding the text/value array like above.

The store has one item type in it 'vehicle' and the json response from the server which loads it is of the form {'vehicle' :'mercedes'}, {'vehicle' 'jaguar'} (ignore if I have the json syntax wrong, am typing this from memory. And finally, I would be fine with having the value field being the same as the text field for setOptions.

However, I am stumped how to accomplish this. Many thanks to anyone who can help me.

Upvotes: 1

Views: 6225

Answers (3)

jakeforaker
jakeforaker

Reputation: 1657

To add to warmachine's answer... In your view: 

                {
                    xtype: 'selectfield',
                    id: 'NameId',
                    label: 'Name',
                    labelWrap: true,
                    placeHolder: 'name'
                },

Controller or initialize function in your view:

initialize: function(){

    var me = this;
    me.callParent(arguments);

    var sto= Ext.getStore('Persons');
    sto.load();

    var options = [];

    sto.each(function(record){
        options.push({
            value: record.get('displayname'),
            text: record.get('displayname')
        });
    });

    var box = Ext.ComponentQuery.query('#NameId')[0];

    box.setOptions(options);
},

Upvotes: 1

warmachine
warmachine

Reputation: 11

You could cycle through the store and push the data into an array then use the array as the argument for setOptions.

Upvotes: 1

ilija139
ilija139

Reputation: 2974

Use this: 

{         id: 'theSelect',
        name: 'vechicleSelect',
       xtype: 'selectfield',
       store: storeObejct,
displayField: 'vehicle',
  valueField: 'vehicle'
}

Read the whole API here Sencha Touch selectfield

Upvotes: 1

Related Questions