Difficulty to load a JsonStore

[Nom4d3]

I was trying to make a simple list with some data from a json, but after some time digging I still having this error:

ext-touch-debug.js:11505
Uncaught TypeError: Cannot read property 'prototype' of undefined

Anyone could help me to find what I'm doing wrong?

And another doubt: Will these stores have the load method? Because I didn't find anything on API about it.

index.js

Ext.setup({
   tabletStartupScreen: 'img/tablet_startup.png',
   phoneStartupScreen: 'img/phone_startup.png',
   icon: 'img/icon.png',
   glossOnIcon: true,

   onReady: function() {
      Ext.regModel('myModel', {
         fields: ['name', 'url']
      });

      var myList = new Ext.List({
         tpl: '<tpl for="."><div class="time"><strong>{name}</strong> {url}</div></tpl>',
         itemSelector: 'div.time',
         singleSelect: true,
         store: new Ext.data.JsonStore({
            url: 'data.json',
            proxy: {
               model: 'myModel',
               type: 'ajax',
               reader: {
                  type: 'json',
                  root: 'images'
               }
            }
         })
      });

      console.info(myList.store);

      function test(){ alert('X'); }
      new Ext.Panel({
         id: 'toolbartxt',
         items: [ myList ],
         fullscreen: true,
         dockedItems: {
            xtype: 'toolbar',
            ui: 'light',
            items: [{
               xtype: 'splitbutton',
               activeButton: 0,
               items: [{
                  text: 'Test 1',
                  handler: test
               }, {
                  text: 'Test 2',
                  handler: test
               }]
            }],
            dock: 'top'
         }
      });
   }
});

data.json

{
images: [
{name: 'Image one', url:'/GetImage.php?id=1'},
{name: 'Image Two', url:'/GetImage.php?id=2'}
]
}

PS: I'm testing on Google Chrome.

Thanks in advanced!

[TommyMaintz]

I'm not sure if this is the problem, but it looks like you defined the model on the proxy instead of the store.

[dombroskib]

Take a look at this thread
http://www.sencha.com/forum/showthre...res-and-Models

[Nom4d3]

Sorry about the Model inside the Proxy. It was a test and I forgot to back to the right place. (that's a problem to try to code after drink ehehe)

After fix that and put the elmasse's override, I don't have more errors. With autoLoad:true, the store is loading. I can see the data.json request on Chrome Console. But my List still without data.

It's a little hard to debug without the 'load' event, but it seens the store is not mapping the data.

Here's my updated code:

//*  *//

Ext.data.JsonReader.override({
   buildExtractors : function() {
      if (typeof this.model == 'string') {
         this.model = Ext.ModelMgr.types[this.model];
      }
      Ext.data.JsonReader.superclass.buildExtractors.apply(this, arguments);
      if (this.root) {
         this.getRoot = this.createAccessor(this.root);
      } else {
         this.getRoot = function(root) {
            return root;
         };
      }
   }
});

Ext.data.JsonStore = Ext.extend(Ext.data.Store, {
   constructor: function(config){
      if(config && config.url){
         config.proxy = new Ext.data.AjaxProxy(config);
      }
      Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(config, {
         reader: new Ext.data.JsonReader(config)
      }));
   }
});
Ext.reg('jsonstore', Ext.data.JsonStore);

//*  *//

Ext.setup({
   tabletStartupScreen: 'img/tablet_startup.png',
   phoneStartupScreen: 'img/phone_startup.png',
   icon: 'img/icon.png',
   glossOnIcon: true,

   onReady: function() {
      Ext.regModel('myModel', {
         fields: ['name', 'url']
      });

      var myList = new Ext.List({
         tpl: '<tpl for="."><div class="time"><strong>{name}</strong> {url}</div></tpl>',
         itemSelector: 'div.time',
         singleSelect: true,
         store: new Ext.data.JsonStore({
            autoLoad: true,
            url: 'data.json',
            model: 'myModel',
            proxy: {
               type: 'ajax',
               reader: {
                  type: 'json',
                  root: 'images'
               }
            }
         })
      });

      function test(){ alert('X'); }
      new Ext.Panel({
         id: 'toolbartxt',
         items: [ myList ],
         fullscreen: true,
         dockedItems: {
            xtype: 'toolbar',
            ui: 'light',
            items: [{
               xtype: 'splitbutton',
               activeButton: 0,
               items: [{
                  text: 'Test 1',
                  handler: test
               }, {
                  text: 'Test 2',
                  handler: test
               }]
            }],
            dock: 'top'
         }
      });

      (function(){
         console.info(myList.store);
      }).defer(1000);
   }
});

Ideas?!

[JimHunt]

Hi.

I'm completely new to ExtJS and Sencha Touch so I'm probably missing something really obvious, but I'm also having a problem loading Json with a JsonStore.

Following a few different examples but the seemed to differ quite a lot, many that I found didn't use the proxy, but they all gave me errors around either the model, prototype, or proxy.setModel not being available. Is there a clear example for Sencha Touch 0.9 that you guys can point me to?

I'm currently trying the following:

       Ext.regModel('Customer', {
            fields: ['first_name', 'last_name']
        });
        
        var ds = new Ext.data.Store({
            url: '/service/overview',
            model: 'Customer',
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'json',
                    root: 'Customers'
                }
            }
        });

And I get this error:

TypeError: Result of expression 'this.proxy.setModel' [undefined] is not a function.

I bet there's something really simple I'm missing, if anyone can set me straight that'd be fantastic.

Cheers, Jim.

[Nom4d3]

And I'm still with the same problem. The store get data from the url, but doesn't have the data mapped.

[journey4712]

I just started with sancha touch and extjs yesterday, and was running into the same problem. I had a few spare hours so i traced through all the javascript to determine what was going on. It seems to me that Ext.data.AjaxProxy.doRequest is creating improper values to send to Ext.Ajax.request().

Specifically doRequest sets up a config item called 'callback' that is called when the request is completed. Except as far as i can tell the only time this will be called is if the 'beforerequest' event returns false. If 'beforerequest' event returns false though the request will never be made.

When the response comes in Ext.data.Ajax.onComplete() is called. onComplete has access to the same options origionally passed into Ext.Ajax.request(). onComplete though wants an item called 'success' to be in the options, not callback.

With this debugging i put together the following:

    Ext.data.AjaxProxy = Ext.extend(Ext.data.AjaxProxy, {
      doRequest: function(operation, callback, scope) {
        var writer  = this.getWriter(),
            request = writer.write(this.buildRequest(operation, callback, scope));
        Ext.apply(request, {
            scope   : this,
            callback : this.createRequestCallback(request, operation, callback, scope),
            success: function(response) {
              request.callback(response.options, true, response);
            },
            method  : this.getMethod(request)
        });
        Ext.Ajax.request(request);
        return request;
      }
    });
    Ext.regModel('sourceVideo', {
      fields: [
        {name:"creationDate", type: 'int'},
        {name:"id", type:'int'},
        {name:"fileName", type:'string'}
      ]
    });
    var store = new Ext.data.JsonStore({
      autoLoad: { addRecords: true },
      id: 'source-video-store',
      model:Ext.ModelMgr.types['sourceVideo'],
      proxy: new Ext.data.AjaxProxy({
        url:"/videos/index.php/sourceVideo/json",
        method: 'GET',
        disableCache: false,
        reader: new Ext.data.JsonReader({
          root: 'results',
          model:Ext.ModelMgr.types['sourceVideo'],
        })
      })
    });

    var test = new Ext.DataPanel({
      title: 'test',
      cls: 'test',
      itemSelector: '.sample',
      scroll: 'vertical',
      store: store,
      tpl: [
        '<tpl for=".">',
          '<div class="sample">',
            '<p>{fileName}</p>',
          '</div>',
        '</tpl>'
      ]
    }); 

Is this a bug in the framework, something that hasn't caught up to the changes or are we all trying to use JsonStore improperly?
journey4712

[edspencer]

The Ext.Ajax.request callback bug has been fixed in source control and will be present in the next release.

The prototype undefined bug has also been fixed, in the interim you can switch out Ext.data.JsonStore for Ext.data.Store

[derMatze]

So, is there any example on how the whole process of storing data (read/store/update) could work? I'm a little bit confused after all these code snippets

[Nom4d3]

I'm stucked. I'm waiting for a new release to back to my studies, because without a jsonstore working, my projects are useless. All my data are in json.

edspencer Do you know when a new version come out?