Search code examples
extjsjsonstoreloaddata

ExtJS Ext.data.JsonStore loadData


Can you help me solve the issue I'm running into with the loadData function as part of the Ext.data.JsonStore? I've created a basic example of the problem I'm running into:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ext JSON example</title>
     <script type="text/javascript" src="lib/ext-base.js"></script>
    <script type="text/javascript" src="lib/ext-all.js"></script>
<script>
    function example() {
        var exampleData = "{'exampleJSON' : {'exampleArray':[{'exampleID':1,'name':'Fred','description':'a guy'},{'exampleID':2,'name':'sue','description':'a girl'}]}}";

        var exampleStore = new Ext.data.JsonStore({
            data: new Ext.data.MemoryProxy(exampleData),
            autoLoad: false,
            root: 'exampleJSON.exampleArray',
    fields: [
          {mapping: "exampleID", name: 'exampleID'},
          {mapping: "name", name: 'name'},
          {mapping: "description", name: 'description'}
    ],
            listener: {
                 load: function (oStore, ayRecords, oOptions ) 
         {
            alert('loaded successfully');
         }
            }
        });

        exampleStore.loadData(exampleData);  
    }

</script>
</head>
<body>
<center><button onclick="example();">Click for Example</button></center>
</body>
</html>  

The problem I'm running into is I'm getting this error reported by Firebug: obj.exampleJSON is undefined This is likely being caused when I set the root as 'exampleJSON.exampleArray'. Can someone help point out what I'm doing wrong?

(using ExtJs 4.1.0)

Thanks guys.

EDIT: to set this up, place ext-all.js and ext-base.js in a lib folder.


Solution

  • Thanks for your replies, they were useful in sending me down the right path. I was able to get my original example to work by removing the 'data' field. I'm guessing it was causing conflicts when I tried to call loadData. Solution listed beflow

        function example() {
            var exampleData = {'exampleJSON' : {'exampleArray':[{'exampleID':1,'name':'Fred','description':'a guy'},{'exampleID':2,'name':'sue','description':'a girl'}]}};
    
            var exampleStore = new Ext.data.JsonStore({
                autoLoad: false,
                root: "exampleJSON.exampleArray",
        fields: [
              {mapping: "exampleID", name:"exampleID"},
              {mapping: "name", name:"name"},
              {mapping: "description", name:"description"}
        ],
                listeners: {
                     load: function (oStore, ayRecords, oOptions ) 
             {
                 alert('loaded successfully: ' + ayRecords.length);
             }
                }
            });
    
            exampleStore.loadData(exampleData);  
        }