Form with Multiple Select Fields Backed by Different AJAX Stores

I'm having a heck of a time trying to get my first Sencha Touch 2 form to work. I'm not a rookie programmer but I've only been using Sencha 2 for a couple of days (and I'm a rookie with MVC).

I have a form that has 3 selectfields. Each field is backed by a separate store. The selectfields have their options loaded by AJAX data, but it seems the data structures are stomping on each other. The first selectfield is getting its options from part of the store for the second selectfield. The second selectfield is getting its options from part of the second store and part of the third store. The third selectfield is getting its options from part of the third store and sometimes part of the second store.

Here is the form code in my view:

Code:

xtype: 'fieldset',title: 'Search Studies',
instructions: '(set search criteria)',
height: 285,
items: [
    {
        xtype: 'textfield',
        name: 'keyword',
        label: 'Keyword'
    },
    {
        xtype: 'selectfield',
        name: 'study_type',
        label: 'Study Type',
        valueField: 'id',
        displayField: 'description',
        store: Ext.create('StudySeeker.store.StudyTypeStore')
    },
    {
        xtype: 'selectfield',
        name: 'study_phase',
        label: 'Study Phase',
        valueField: 'id',
        displayField: 'description',
        store: Ext.create('StudySeeker.store.StudyPhaseStore')
    },
    {
        xtype: 'multiselectfield',
        name: 'disease_site',
        label: 'Disease Site',
        delimiter: ',',
        mode: 'MULTI',
        valueField: 'id',
        displayField: 'description',
        store: Ext.create('StudySeeker.store.DiseaseSiteStore')
    }
]

Here is the data model for the stores:

Code:

Ext.define('StudySeeker.model.RefTableList', {    
    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'id', type: 'int' },
            { name: 'description', type: 'string' }
        ]
    }
});

Here are the stores:

StudyTypeStore:

Code:

Ext.define('StudySeeker.store.StudyTypeStore', {    
    extend: 'Ext.data.Store',
    requires: ['StudySeeker.model.RefTableList'],
    config: {
        model: 'StudySeeker.model.RefTableList',
        proxy: {
            type: 'ajax',
            url: '/ClinicalTrials/Service/studyType.jsp',
            isSynchronous: true,
            actionMethods: {
                create : 'POST',
                read   : 'POST', // by default GET
                update : 'POST',
                destroy: 'POST'
            },
            reader: {
                type: 'json',
                useSimpleAccessors: true
            }
        },
        autoLoad: true
    }
});

This is what the AJAX call returns:

[{"id":"-1","description":"ALL"},{"id":"1","description":"Intervention"},{"id":"2","description":"Observational"},{"id":"3","description":"Ancillary\/Correlative"}]

StudyPhaseStore:

Code:

Ext.define('StudySeeker.store.StudyPhaseStore', {    
    extend: 'Ext.data.Store',
    requires: ['StudySeeker.model.RefTableList'],
    config: {
        model: 'StudySeeker.model.RefTableList',
        proxy: {
            type: 'ajax',
            url: '/ClinicalTrials/Service/studyPhase.jsp',
            isSynchronous: true,
            actionMethods: {
                create : 'POST',
                read   : 'POST', // by default GET
                update : 'POST',
                destroy: 'POST'
            },
            reader: {
                type: 'json',
                useSimpleAccessors: true
            }
        },
        autoLoad: true
    }
});

This is what the AJAX call returns:

[{"id":"-1","description":"ALL"},{"id":"1","description":"0"},{"id":"2","description":"I"},{"id":"3","description":"I\/II"},{"id":"4","description":"II"},{"id":"5","description":"II\/III"},{"id":"6","description":"III"},{"id":"7","description":"IV"},{"id":"8","description":"Pilot"},{"id":"9","description":"N\/A"},{"id":"10","description":"Feasibility"}]

DiseaseSiteStore:

Code:

Ext.define('StudySeeker.store.DiseaseSiteStore', {    
    extend: 'Ext.data.Store',
    requires: ['StudySeeker.model.RefTableList'],
    config: {
        model: 'StudySeeker.model.RefTableList',
        proxy: {
            type: 'ajax',
            url: '/ClinicalTrials/Service/diseaseSite.jsp',
            isSynchronous: true,
            actionMethods: {
                create : 'POST',
                read   : 'POST', // by default GET
                update : 'POST',
                destroy: 'POST'
            },
            reader: {
                type: 'json',
                useSimpleAccessors: true
            }
        },
        autoLoad: true
    }
});

This is what the AJAX call returns:

[{"id":"-1","description":"ALL"},{"id":"7","description":"Skin"},{"id":"8","description":"Ovary"},{"id":"9","description":"Lung's"},{"id":"10","description":"Stomach"},{"id":"12","description":"Prostate"},{"id":"13","description":"Breast"},{"id":"14","description":"Other Female Genital"},{"id":"15","description":"Other Male Genital"},{"id":"16","description":"Test 2"},{"id":"100","description":"Multiple Myeloma"},{"id":"101","description":"Multiple sites"},{"id":"103","description":"Non-Hodgkins Lymphoma"},{"id":"104","description":"Lung"},{"id":"105","description":"Brain & Nervous System"},{"id":"106","description":"Myeloid and Monocytic Leukemia"},{"id":"111","description":"Urinary Bladder"},{"id":"114","description":"Other Hematopoietic"},{"id":"116","description":"Lymphoid Leukemia"},{"id":"124","description":"Breast - Female"},{"id":"127","description":"Kidney"},{"id":"129","description":"Liver"},{"id":"134","description":"Soft Tissue"},{"id":"135","description":"Leukemia, other"},{"id":"140","description":"Bones and Joints"},{"id":"141","description":"Cervix"},{"id":"145","description":"Ill Defined Sites"},{"id":"148","description":"Buccal Cavity and Pharnyx"},{"id":"152","description":"Leukemia, other"},{"id":"154","description":"Melanoma, skin"},{"id":"155","description":"Breast - Female"},{"id":"156","description":"Brain & Nervous System"},{"id":"171","description":"Colon"},{"id":"209","description":"Pancreas"},{"id":"211","description":"Unknown Sites"},{"id":"296","description":"Lip, Oral Cavity and Pharynx"},{"id":"306","description":"Melanoma, skin"},{"id":"311","description":"Hodgkins Lymphoma"},{"id":"315","description":"Other Endocrine System"},{"id":"325","description":"Eye and Orbit"},{"id":"339","description":"Esophagus"},{"id":"386","description":"Rectum"},{"id":"414","description":"Rt Lung"}]

I tried hardcoding the data into the store just to see if AJAX was the problem (I added data: [{"id":"whatever","description:whatever"}] to the store definition in place of the proxy). It still had the lists jumbled up when I tested the form in Chrome. I also tried putting "new" in front of the create statements on the stores in the view selectfields. Didn't help either. I must be missing some fundamental MVC logic.

I have been struggling with this for two days. Any help is appreciated!