How to set a selectfield in Sencha Touch from array?

Question

I am working in a Sencha Touch app and I would like to push in a combobox, values previously filtered from a store.

var store = Ext.getStore('Surveys');
var templatesAvailable = [];
store.filterBy(function (record) {
  console.log(record.get('templateName'));
  record.get('templateName'); --> I get value
  templatesAvailable.push(record.get('templateName')); --> into the array
});

Next step would be transfer array to a specified selector, for example and in my case...

this.getTemplateSelector

  {
    xtype       : 'selectfield',
    itemId      : 'selectSurveysTemplates',
    cls         : 'filterbar-selectfieldplus',
    displayField: 'value',  --> here is the secret  ;-)
    valueField  : 'id',
    autoCreate  : true
  },

What should it be the correct way for this implementation? I have tested with different options but It is not working for me..

Thank you in advance..

Answer 1

How about this one:

selectfield.setOptions(
    store.getRange().map(function(record) {
        return {
            text:record.get("templateName"),
            value:record.get("templateName")
        };
    })
);

This should do the following:

• Selectfield.setOptions sets the value of Selectfield.options. According to the docs, options takes an array of objects with properties text and value, so I guess setOptions takes the same.
• Store.getRange gives you an array of records.
• Array.map that takes a function and converts every item in the input array using that function.

Voilà, you should be done.