Sencha: Use store in other view

Question

I have a store, which is created in a controller when login is successful. The code looks like this:

controller is login.js

    //////////// create a JSONstore and load companies into it ////////////// 
var companies_data = new Ext.data.JsonReader({}, [ 'companyame']);      
    var storeCompanies = new Ext.data.JsonStore({
    storeId: 'storeCompanies', 
          proxy: new Ext.data.HttpProxy({
              type: 'GET',
            url: url+'dashboard/?Uid='+uid+'&Ude='+ude,
            reader: {
                type: 'json',
                root: 'root',
                totalProperty: 'total'
            },
            headers: {
               'Accept' : 'application/json;application/x-www-form-urlencoded',
               'Content-Type' : 'application/x-www-form-urlencoded',
            },
             params: {
                Uid: localStorage.uid,
                Ude: localStorage.ude,
            },
          }),
          reader: companies_data,  
          root: 'd',
          type: 'localstorage',
          autoLoad : true,
          id: 'company_Id',
          scope : this,
          fields: ['companyname']
        });

The code is a function, which is called on successful login and values are passed to it.

This works fine for as is, and the store is available to the login view

I need the store to be available to my mainview.

In my login.js controller, I have referred to the mainview like this:

Ext.define('axis3.controller.Login', {
extend: 'Ext.app.Controller',
config: {
    refs: {
        loginView: loginview,
        mainView: 'mainview',
        chartView: 'chartview'
    },
    control: {
        loginView: {
            signInCommand: 'onSignInCommand'
        },
        mainMenuView: {
            onSignOffCommand: 'onSignOffCommand'
        }
    }
},

but this does not seem to help.

When I use the following in my mainview

var companyStore = Ext.getStore('storeCompanies'); // 
console.log('1-Number : ' + companyStore.getCount()); // Using getCount method.
var anotherCompany = { companyname: 'North Wells'};
companyStore.add(anotherCompany);  // 
console.log('2-Number : ' + companyStore.getCount()); // Using getCount method.
//////////////

Ext.define('axis3.view.Main', {
extend: 'Ext.form.Panel',
requires: ['Ext.TitleBar','Ext.data.Store'],
alias: 'widget.mainview',......................

I get this error:

TypeError: 'undefined' is not an object (evaluating 'companyStore.getCount')

How can I use my store in a different view?

Answer 1

If have figured out the problem. The view is trying to use the store before it exists. The store is only created when a user logs in.

The solution I have decided to use is to create an empty store and then add data to it on successful login.

var anotherCompany = {companyname: 'Keep Groom'};
companiesStore2.add(anotherCompany);  // Use the add function to add records or model instances.

This seems to work

Answer 2

Give storeId, try like this

var storeCompanies = Ext.create("Ext.data.JsonStore",{
          storeId: 'storeCompanies', // add this line
          proxy: new Ext.data.HttpProxy({
            type: 'GET',
            url: url+'dashboard/?Uid='+uid+'&Ude='+ude,
            reader: {
                type: 'json',
                root: 'root',
                totalProperty: 'total'
            },
            headers: {
               'Accept' : 'application/json;application/x-www-form-urlencoded',
               'Content-Type' : 'application/x-www-form-urlencoded',
            },
             params: {
                Uid: localStorage.uid,
                Ude: localStorage.ude,
            },
          }),
          reader: companies_data,  
          root: 'd',
          type: 'localstorage',
          autoLoad : true,
          id: 'company_Id',
          scope : this,
          fields: ['companyname']
        });

Now try again with Ext.getStore('storeCompanies');