sencha-touch

Uncaught typeError: Cannot read property 'isModel' of undefined


HI im getting this error after executing my code. It says "Uncaught typeError: Cannot read property 'isModel' of undefined".Im trying to display a list using my defined model named "model.login" and a store with dummy data.

Ext.Loader.setConfig({
enabled: true,
paths:{
    'model' : 'app/model',
    'store' : 'app/store'
}

});
Ext.application({
    name: 'GS',
    launch: function(){
        var myStore = null;
        Ext.require('model.login', function(){
            var login = Ext.create('model.login');
            myStore = new Ext.data.Store({
                model: login,
                data:[
                      {id:'09803' , issued_at: 'thisurl', instance_url:'https', signature:'token', access_token:'ser'}
                      ]
            });
        });
        this.viewport = new Ext.Panel({
            fullscreen: true,
            items:[
                   {
                       xtype: 'list',
                       itemTpl: '{id}',
                       store: myStore
                   }
                   ]
        });
    }

});

Solution

  • Your call to create the viewport is happening before model.login is loaded and your store is created. Move the code to create the viewport into the callback for your Ext.require.

    Also, when passing a model into the store, you pass the model constructor, not an instance of it.

    Ext.application({
      name: 'GS',
      launch: function(){
        this.viewport = 
        var me = this;
        Ext.require('model.login', function(){                
          myStore = new Ext.data.Store({;
    
          me.viewport = new Ext.Panel({
            fullscreen: true,
            // You can pass a single item into item
            items:{
              xtype: 'list',
              itemTpl: '{id}',
              store: myStore
            }
          });
        });
      }
    });
    

    Note that there's a better way to do this, you can tell the application what models to load and inline some of your calls to make it easier to read

    Ext.application({
      name: 'GS',
      models: 'login', // looks in GS.model.login
      launch: function(){
        me.viewport = new Ext.Panel({
          fullscreen: true,
          // You can pass a single item into item
          items:{
            xtype: 'list',
            itemTpl: '{id}',
            store: {
              model: 'model.login', // or GS.model.login without quotes
              data:[              
                {id:'09803' , issued_at: 'thisurl', instance_url:'https', signature:'token', access_token:'ser'}]
              }
           }
        });
      }
    });