Problem with Controller launch function

[shellgrit]

I have the following view which allows the user of the app to browse a list of bird species:

Ext.define('ShorebirdsId.view.ViewBrowse', {
    extend: 'Ext.navigation.View',
    xtype: 'browsetab',
    requires: [
        'ShorebirdsId.store.StoreSpeciesAustralia',
        'ShorebirdsId.store.StoreSpeciesNewZealand',
        'Ext.dataview.List',
        'Ext.field.Search'
        ],


    config: {
        iconCls              : 'bookmarks',
        title                : 'Browse',
        badgeText            : 'Group',
        navigationBar        : false,
        items: [{
            docked           : 'top',
            xtype            : 'titlebar',
            ui               : 'light',
            id               : 'browsetoolbarsearch',
            items            : [{
                xtype        : 'searchfield',
                label        : 'Search',
                id           : 'browsefieldsearch'
            }]
        },{
            xtype            : 'list',
            id               : 'browselist',
            style            : 'background-color: white',
            grouped          : true,
            itemTpl          : [
                '<div class="spp-list">',
                    '<img class="spp-thumb" src="resources/thumbnails/thm{speciesCode}.png" />',
                    '<p class="spp-name">&nbsp;{speciesName}</p>',
                    '<p class="spp-scientific">&nbsp;{speciesScientific}</p>',
                    '<p>&nbsp;</p>',
                '</div>'
            ],


            store            : 'storespeciesaustralia',


            onItemDisclosure : false
        }]
    }
});

The store is structured as follows:

Ext.define('ShorebirdsId.store.StoreSpeciesAustralia', {
    extend: 'Ext.data.Store',
    requires: [
        'ShorebirdsId.model.ModelSpecies'
    ],


    config: {
        storeId: 'storespeciesaustralia',
        model: 'ShorebirdsId.model.ModelSpecies',
        sorters: [{
            property: 'speciesGroup',
            direction: 'ASC'
        },{
            property: 'speciesName',
            direction: 'ASC'
        }],
        grouper: {
            groupFn: function(record) {
                return record.get('speciesGroup');
            }
        },


        data: [
            {
                // Banded Lapwing
                speciesId          : '135',
                speciesMask        : 1,
                speciesName        : 'Banded Lapwing',
                speciesFirst       : 'Banded Lapwing',
                speciesLast        : 'Lapwing',
                speciesScientific  : 'Vanellus tricolor',
                speciesGroup       : 'Lapwings',
                speciesSearch      : 'BALA Banded Lapwing Charadriidae Vanellus tricolor',
                speciesCode        : 'BALA',
                speciesHabitat     : 'Open short grasslands and semi-arid rangelands, southern half of Australia.',
                speciesStatus      : 'Resident species',
                speciesTip         : 'Small bright red wattle and bold, U-shaped breast distinguishes it from Masked Lapwing.',
                speciesInFlight    : '',
                speciesScarcity    : '',
                speciesSimilar     : 'None',
                speciesRatio       : '',
                speciesSize        : '27'
            },{
...
            }
        ]
    }
});

However I have two identically structured stores (one for Australia and one for New Zealand) that the user can swap between via settings that are accessed via the following view:

Ext.define('ShorebirdsId.view.ViewSettings', {
    extend: 'Ext.Container',
    xtype: 'settingstab',
    id: 'settingscard',


    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Radio'
    ],


    config: {
        iconCls: 'settings',
        title: 'Settings',
        scrollable: 'vertical',
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            ui: 'light',
            title: 'Settings'
        },{
            xtype: 'fieldset',
            id: 'fieldsettaxonomy',
            title: 'Taxonomy',
            instructions: 'Select your preferred taxonomy',
            items: [{
                xtype: 'radiofield',
                id: 'taxonomyau',
                name: 'radiotaxonomy',
                value: 'australia',
                label: 'Australia',
                labelWidth: '40%',
                checked: true
            },{
                xtype: 'radiofield',
                id: 'taxonomynz',
                name: 'radiotaxonomy',
                value: 'newzealand',
                label: 'New Zealand',
                labelWidth: '40%',
                checked: false
            }]
        }]
    }
});

There is a controller for this view which correctly handles the swapping of the stores:

Ext.define('ShorebirdsId.controller.ControllerSettings', {
    extend: 'Ext.app.Controller',
    requires: [
        'ShorebirdsId.store.StoreAudioAustralia',
        'ShorebirdsId.store.StoreAudioNewZealand',
        'ShorebirdsId.store.StoreImageAustralia',
        'ShorebirdsId.store.StoreImageNewZealand',
        'ShorebirdsId.store.StoreSpeciesAustralia',
        'ShorebirdsId.store.StoreSpeciesNewZealand',
        'ShorebirdsId.view.ViewAudio',
        'ShorebirdsId.view.ViewBrowse',
        'ShorebirdsId.view.ViewMain',
        'ShorebirdsId.view.ViewSettings'
    ],

  config: {
        control: {
            '#taxonomyau' : {
                check: 'changeTaxonomy'
            },
            '#taxonomynz' : {
                check: 'changeTaxonomy'
            }
        }
    },
    changeTaxonomy: function (radio, e, eOpts) {
        
        //
        // Clear any filter on the current Species store and from the Search field
        //
        ShorebirdsId.util.Globals.speciesStore.clearFilter();
        Ext.getCmp('browsefieldsearch').setValue('');


        //
        // Get the new Taxonomy
        //
        ShorebirdsId.util.Globals.displayTaxonomy = radio.getValue();


        //
        // Store the new Taxonomy in Local Storage
        //
        localStorage.setItem('displayTaxonomy', ShorebirdsId.util.Globals.displayTaxonomy);


        //
        // And display it
        //
        console.info('New Taxonomy = ' + ShorebirdsId.util.Globals.displayTaxonomy);
        
        //
        // Set the speciesStore, imageStore & speciesStore variables to the appropriate store names for the new Taxonomy
        //
        ShorebirdsId.util.Globals.speciesStore = Ext.getStore('storespecies' + ShorebirdsId.util.Globals.displayTaxonomy);
        console.info(ShorebirdsId.util.Globals.speciesStore);
        ShorebirdsId.util.Globals.imageStore   = Ext.getStore('storeimage'   + ShorebirdsId.util.Globals.displayTaxonomy);        
        ShorebirdsId.util.Globals.audioStore   = Ext.getStore('storeaudio'   + ShorebirdsId.util.Globals.displayTaxonomy);        

        //
        // Set the store to be used on the Browse & Audio tabs for the new Language
        //
        Ext.getCmp('browselist').setStore(ShorebirdsId.util.Globals.speciesStore);
        Ext.getCmp('audiolist' ).setStore(ShorebirdsId.util.Globals.audioStore);
    },

The store last used (e.g. Australia or New Zealand) is saved in localStorage, then retrieved (via the launch function of the same controller) when the app is relaunched and used to set the store to be used in the list.

If the saved setting is Australia everything works fine, but if it is New Zealand it crashes on the following statement (an identical version of which works fine when swapping stores):

        Ext.getCmp('browselist').setStore(ShorebirdsId.util.Globals.speciesStore);

with the following error:

TypeError: undefined is not an object (evaluating 'me.getItemAt(i).getHeader') in Ext.dataview.List#updateHeaderMapList.js:1177

Can anyone suggest why this statement fails in the launch function of the controller but works correctly when changing stores once the app is up and running?

[tristan.lee]

Thank you for providing your code examples. Have you been able to solve your issue? If not, could you provide a simplified fiddle (https://fiddle.sencha.com) that reproduces the error so I can help narrow down the cause?

[shellgrit]

Hi Tristan,

I solved the problem by only using by only using one store with separate fields for Australia & New Zealand where required. Thus I no longer need to swap stores and don't have problem with the controller launch function.