Auto-bind selectfield to a store in sencha touch?

Question

I'm trying to bind a selectfield to a store in sencha-touch. However, I'm getting the following error:

Uncaught TypeError: Cannot call method 'on' of undefined 

The field looks like so:

{
            xtype: 'selectfield',
            label: 'Gender',
            store: 'GenderStore',
            displayField: 'ItemName',
            valueField: 'Id'
        },

and store looks like so:

Ext.define('MobileApp.store.Gender', {
    extend: 'Ext.data.Store',

    requires: [
        'MobileApp.model.Lookup',
        'Ext.data.proxy.Rest'
    ],

    config: {
        autoLoad: true,
        model: 'MobileApp.model.Lookup',
        storeId: 'GenderStore',
        proxy: {
            type: 'rest',            
            url : '/api/lookup/genders',
            reader: {
                type: 'json'
            }
        }
    }    
});

Any ideas why this isn't working? I thought maybe specifying the storeId would automatically create the store similar to using xtype? Does the field not bind automatically to the store, or do I need to explicitly create the store?

Answer 1

Ensure your view is requiring the store. Perhaps it does not exist yet (and it needs to so it can find it by ID):

requires: ['App.store.MyStore']

Answer 2

the field

     {
        xtype: 'selectfield',
        label: 'Gender',
        store: GenderStore,
        displayField: 'ItemName',
        valueField: 'Id'
    },

the store

var GenderStore = Ext.create('Ext.data.Store', {
requires: [
    'MobileApp.model.Lookup',
    'Ext.data.proxy.Rest'
],
autoLoad: true,
model: 'MobileApp.model.Lookup',
proxy: {
    type: 'ajax',            
    url : '/api/lookup/genders',
    reader: {
       type: 'json',
       rootProperty: 'd'
    },
    root: 'd'

}   
});