Form field to pick from a list of objects in a store

Question

I'm new to Sencha, trying to implement a Sencha formpanel with a field to pick from a list of objects in a store. This seems like a sufficiently basic pattern that there must be a simple solution. I have a model which defines an ajax endpoint returning a json array (places) of name/id pairs:

Ext.define('MyApp.model.Place', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'name', type: 'string'},
            {name: 'id', type: 'int'},
        ],
        proxy: {
            type: 'ajax',
            url: '/m/places/',
            reader: {
                type: 'json',
                rootProperty: 'places',
            },
        },
    },
});

And a store:

Ext.define('MyApp.store.Place', {
    extend: 'Ext.data.Store',
    requires: ['MyApp.model.Place'],
    config: {
        model: 'MyApp.model.Place',
        autoLoad: true,
        sorters: [
            {
                property : 'name',
                direction: 'ASC',
            },
        ],
    },
});

I want a read-only text field for the place name and a hidden field to submit the place id:

{
    xtype: 'textfield',
    name: 'place_name',
    label: 'Place',
    readOnly: true,
    listeners: {
        focus: function () {
            var place_picker = Ext.create('Ext.Picker', {
                slots: [
                    {
                        name: 'place_name',
                        title: 'Choose a Place',
                        store: Ext.create('MyApp.store.Place'),
                        itemTpl: '{name}',
                        listeners: {
                            itemtap: function (obj, index, target, record, e, eOpts) {
                                var form = Ext.getCmp('entityform');
                                form.setValues({
                                    place_name: record.get('name'),
                                    place_id: record.get('id'),
                                });
                                // how to dismiss the picker?
                                obj.parent.hide();
                            },
                        },
                    },
                ]
            });
            Ext.Viewport.add(place_picker);
            place_picker.show();
        },
    },
},
{
    xtype: 'hiddenfield',
    name: 'place_id',
},

At this point, tapping the field causes the picker to slide up from the bottom and display the loading animation, but it is not being populated with the list of place names, although I can see that the ajax request has been made and that it has returned the expected json document.

I'll stop here and ask if I'm on the right track or is there some better approach out there?

Why isn't the picker being populated with the results of the ajax request? Is my use of itemTpl incorrect?

Am I setting the form fields in a sencha-appropriate way?

How should I dismiss the picker on itemtap? I somehow doubt that my use of hide() is the proper way.

Sivakumar Sivakumar · Accepted Answer · 2012-10-11T06:59:02

Picker slots has an data config which is an array of objects. It should have a specific format with text and value.

slots :[
    data : [{
text : someValue,
value : someValue1,}] ]

You need to add objects which has the fields text and value to slots.

Form field to pick from a list of objects in a store

1 Answers