Extjs two instances of stores not using different models

Question

edit http://jsfiddle.net/zns6B/4/ Added js fiddle link and running into a cannot get 'Fields' of undefined now

edit2 So i found that the second grids store model is correct with Sc.Model.B. But the records in the store have ids that are Sc.Model.A . So my store model is set to Sc.Model.B but the store is using Sc.Model.A . It still gets stores the data in the store but only as if the model was set to Sc.Model.A in the first place.

edit3 I have take all the creation of instance out of my ListGrid. I have instead added them when creating the list grid. I have added the following. This does not work either. I am at a lose for what to do.

var obj1 = Ext.create('Sc.ListGrid',{
        title: "first Component",
        foo: true,
        id: 'firstGrid',
        myStore: Ext.create('My.Store.MyStore',{model:Ext.create('My.Model.Model'});
        renderTo: 'renderToMe1'
    });

I am trying to generate these two grids. When foo == true i want it to generate a store with model A. When it equals false i want it to use model B. I have tried to just specifically add the My.Model.MyModel but that does not work. The second grid will somehow inherit the first models model. I have changed it just to try and use fields instead of using the model at all but the second grid still uses the first grids.

I have also tried declaring the Stores inside the initComponent as well but i get the same result either way.

    var obj1 = Ext.create('Sc.ListGrid',{
        title: "first Component",
        foo: true,
            id: 'firstGrid',
        renderTo: 'renderToMe1'
    });

var obj2 = Ext.create('Sc.ListGrid',{
        title: "second Component",
        foo: false,
        renderTo: 'renderToMe2'
    });

Sc.ListGrid

Ext.define('Sc.ListGrid', {
    extend: 'Ext.grid.Panel',
    title: 'Grid',
    store: Ext.data.StoreManager.lookup('bleh'),
    requires: ['stuff'],
    columns: [
        { text: 'id',  dataIndex: 'id' },
    ],
    config:{
        foo: null,
    },
    initComponent: function(){

        if(this.foo == true){
            Ext.apply(this,{
                store: this.buildStore1()
                });
        }
        if(this.foo == false){
            Ext.apply(this,{
                store: this.buildStore2()
                });
        }
        this.callParent();
    },
    buildStore1:function(){
        return Ext.create('Sc.Store.League.LeagueStore',{url:'somewhere',fields:["S"]});
    },
    buildStore2:function(){
        return Ext.create('Sc.Store.League.LeagueStore',{url:'somewhere',fields:["A"]});
    }
});

Also an example of a model i am trying to use as well.

 Ext.define('Sc.Model.A', {
      extend: 'Ext.data.Model',
      fields: [
          {name: 'id',  type: 'string'},
          {name: 'type',   type: 'string'},
          {name: 'gamename', type: 'string'}
       ]
});

 Ext.define('Sc.Model.B', {
          extend: 'Ext.data.Model',
          fields: [
              {name: 'id',  type: 'string'},
              {name: 'type',   type: 'string'},
              {name: 'gamename', type: 'string'},
              {name: 'something1', type: 'string'},
              {name: 'something2', type: 'string'},
           ]
    });

It will create both grids and load the data from my webservice. When i check the grid with Sc.Model.B's data it will have id and type. But will not have any data for something1, and something2. My webserivce is returning json and all values are entered. There are no nulls. If i Ext.getCmp('firstGrid').getStore().getData(0); If i use Ext.getCmp('firstGrid').getStore() and check the model name. It shows Model B but reflects A

Answer 1

The issue was that the proxy wasn't being set or created properly because the proxy model was referencing the previous model instance. This is my solution

var themodel = 'A.Model.SomeModel';

var myProxy = new Ext.data.proxy.Ajax({
            model: themodel,
            url: url,
            reader: {
                type: 'json',
            }
        });

Ext.apply(this,{
                columns: modelColumns.columns,
                store: Ext.create('M.Store.MyStore',{
                        model: themodel ,
                        autoLoad: true,
                        proxy: myProxy
                    })
                });

Answer 2

Do you need it to be done in the initComponent()??

This is a fiddle I saved from a while ago when I was trying to do something similar. If you need help tweaking it let me know and ill update it.

The main thing to note is the grid.reconfigure(store,columns);

That will change the grid's store and columns appropriately.

http://jsfiddle.net/zqG55/1/