How to use setOptions method of select field with a store

I can use the setOptions method to successfully 开发者_StackOverflowspecify 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.

Use this:

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

Read the whole API here Sencha Touch selectfield

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

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);
},