Sencha Touch How to display the values in the store in Picker?

Question

I need to add my store value in picker. Is it possible in Sencha? If anyone know the answer please help me on this. Thanks in advance.

I have a list of values in my store. I need to display this values in Ext.Picker. Is it possible? — Thiru, May 08 '13 at 10:36
friends please read the questions carefully before down voting it. — Thiru, Aug 19 '13 at 12:59

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

var picker = Ext.create('Ext.Picker', {
slots: [
    {
        name : 'limit_speed',
        title: 'Speed',
        data : [
            {text: '50 KB/s', value: 50},
            {text: '100 KB/s', value: 100},
            {text: '200 KB/s', value: 200},
            {text: '300 KB/s', value: 300}
        ]
    }
]
});
Ext.Viewport.add(picker);
picker.show();

You can replace data with store, read the documentation provided in the link below.

The slots configuration with a few key values:

name: The name of the slot (will be the key when using getValues in this Ext.picker.Picker).

title: The title of this slot (if useTitles is set to true).

data/store: The data or store to use for this slot.

http://docs.sencha.com/touch/2.2.0/#!/api/Ext.picker.Picker

Set slot data from a store:

slots : [{
     store:null,
     name:'picker'
}]

I think I have clearly mentioned in my question, that I need a steps to get the values only from store. not static data. (no hard coded values.) — Thiru, Aug 19 '13 at 12:56
See my answer, i have added a small example. Replace the null value with your store. Also see: http://docs.sencha.com/touch/2.2.0/#!/api/Ext.picker.Slot for the setStore method. — nytrm, Aug 19 '13 at 14:35

score 0 · Answer 2 · answered Jan 16 '14 at 12:16

This is a bit old but it might help somebody.

You can call the setStore() method in the initialize function and then you need to set the valueField property on the picker slot to the value you want from the store.

Example of a picker with a slot and initialize:

Ext.define('MyApp.view.JobPicker', {
extend: 'Ext.picker.Picker',
alias: 'widget.jobpicker',

config: {
    zIndex: 10,
    useTitles: true,
    doneButton: {
        action: 'donePreviousJobPicker'
    },
    cancelButton: {
        action: 'cancel'
    },
    slots: [
        {
            xtype: 'pickerslot',
            itemTpl: [
                '{jobName}'
            ],
            align: 'center',
            name: 'JobSlot',
            title: 'Select Previous Job',
            valueField: 'indexID'
        }
    ]
},

initialize: function() {
    this.callParent();

    var jobs = Ext.getStore("JobsPickerStore");
    jobs.clearFilter(true);
    this.query('pickerslot[name=JobSlot]')[0].setStore(jobs);
}

});

Sencha Touch How to display the values in the store in Picker?

2 Answers2