1. #1
    Sencha User Nom4d3's Avatar
    Join Date
    Sep 2008
    Location
    Araras / SP / Brazil
    Posts
    81
    Vote Rating
    1
    Nom4d3 is on a distinguished road

      0  

    Question Difficulty to load a JsonStore

    Difficulty to load a JsonStore


    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
    Code:
    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!

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


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

  3. #3

  4. #4
    Sencha User Nom4d3's Avatar
    Join Date
    Sep 2008
    Location
    Araras / SP / Brazil
    Posts
    81
    Vote Rating
    1
    Nom4d3 is on a distinguished road

      0  

    Default


    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:

    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?!

  5. #5
    Ext User
    Join Date
    Jun 2010
    Posts
    1
    Vote Rating
    0
    JimHunt is on a distinguished road

      0  

    Default


    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:

    Code:
           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.

  6. #6
    Sencha User Nom4d3's Avatar
    Join Date
    Sep 2008
    Location
    Araras / SP / Brazil
    Posts
    81
    Vote Rating
    1
    Nom4d3 is on a distinguished road

      0  

    Default


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


  7. #7
    Ext User
    Join Date
    Jun 2010
    Posts
    1
    Vote Rating
    0
    journey4712 is on a distinguished road

      0  

    Default


    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:
    PHP Code:
        Ext.data.AjaxProxy Ext.extend(Ext.data.AjaxProxy, {
          
    doRequest: function(operationcallbackscope) {
            var 
    writer  this.getWriter(),
                
    request writer.write(this.buildRequest(operationcallbackscope));
            
    Ext.apply(request, {
                
    scope   this,
                
    callback this.createRequestCallback(requestoperationcallbackscope),
                
    success: function(response) {
                  
    request.callback(response.optionstrueresponse);
                },
                
    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: { addRecordstrue },
          
    id'source-video-store',
          
    model:Ext.ModelMgr.types['sourceVideo'],
          
    proxy: new Ext.data.AjaxProxy({
            
    url:"/videos/index.php/sourceVideo/json",
            
    method'GET',
            
    disableCachefalse,
            
    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',
          
    storestore,
          
    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

  8. #8
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    7
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    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
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  9. #9
    Ext User
    Join Date
    Jun 2010
    Posts
    1
    Vote Rating
    0
    derMatze is on a distinguished road

      0  

    Default


    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

  10. #10
    Sencha User Nom4d3's Avatar
    Join Date
    Sep 2008
    Location
    Araras / SP / Brazil
    Posts
    81
    Vote Rating
    1
    Nom4d3 is on a distinguished road

      0  

    Default


    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?

Similar Threads

  1. Layout Difficulty
    By aclsoftware in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 2 Feb 2010, 7:20 AM
  2. Check JsonStore load and Store load for form display
    By vayumahesh in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 9 Sep 2008, 12:07 PM
  3. Difficulty with .body.update()
    By jezmck in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 20 Feb 2008, 5:06 AM

Thread Participants: 9