How to implement hierarchical model in Sencha Touch

Question

I have read many questions/answers and tutorials and I still fail to implement hierarchical model in Sencha Touch. The root model is Tag. Each Tag has many Items. Here is my model:

The root tag:

app.models.Tag = Ext.regModel("Tag", {
    fields : [ {
        name : "id",
        type : "int"
    }, {
        name : "name",
        type : "string"
    }], 
    associations : {
        type : "hasMany",
        model : "TagItem", 
        name : "items"
    }
});

Adjected TagItem

app.models.TagItem = Ext.regModel("TagItem", {
    fields : [ {
        name : "id",
        type : "int"
    }, {
        name : "title",
        type : "string"
    }, {
        name : "type", 
        type : "string"
    }, {
        name : "tag_id", 
        type : "int"
    }], 
    associations : {
        belongsTo : {
            model : "Tag",
            name : "items"
        }
    }
});

TagStore:

app.stores.tagItems = new Ext.data.Store({
    model : "app.models.TagItem",
    proxy : {
        type : 'scripttag',
        root : 'items',
        url : 'http://www.s-lab.cz/ios/api/tags.php'
    }
});

Tags:

app.stores.tags = new Ext.data.Store({
    model : "app.models.TagItems",
    proxy : {
        type : 'scripttag',
        url : 'http://www.s-lab.cz/ios/api/tags.php'
    }
});

When I try to load items from the store I get:

Uncaught TypeError: Cannot call method 'read' of undefined

My JSON looks like this:

stcCallback1005([
 {
    "id":1,
    "name":"Doktor",
    "url":"doktor",
    "items":[
       {
          "type":"video",
          "id":1,
          "title":"First tag item",
          "tag_id":1
       },
       {
          "type":"article",
          "id":1,
          "title":"Second tag item - article",
          "tag_id":1
       },
       {
          "type":"article",
          "id":2,
          "title":"Third tag item - article",
          "tag_id":1
       },
       {
          "type":"video",
          "id":2,
          "title":"Fourth tag item",
          "tag_id":1
       }
    ]
 },
 {
    "id":2,
    "name":"Nemocnice",
    "url":"nemocnice"
 },
 {
    "id":3,
    "name":"Sestra",
    "url":"sestra"
     }
  ]);

Update:

I changed the code with suggestions and the resulting JSON is like this:

stcCallback1005({
    "results": [{
        "id": 1,
        "name": "Doktor",
        "url": "doktor",
        "items": [{
            "type": "video",
            "id": 1,
            "title": "First tag item",
            "tag_id": 1
        }, {
            "type": "article",
            "id": 1,
            "title": "Second tag item - article",
            "tag_id": 1
        }, {
            "type": "article",
            "id": 2,
            "title": "Third tag item - article",
            "tag_id": 1
        }, {
            "type": "video",
            "id": 2,
            "title": "Fourth tag item",
            "tag_id": 1
        }]
    }, {
        "id": 2,
        "name": "Nemocnice",
        "url": "nemocnice"
    }, {
        "id": 3,
        "name": "Sestra",
        "url": "sestra"
    }]
});

But still I'm not able to access the subsequent items: app.stores.tags.getAt(0) works, but app.stores.tags.getAt(0).TagItems() does not (neither app.stores.tags.getAt(0).items or app.stores.tags.getAt(0).items() does). And also my template doesn't render correctly: <tpl for=".">{name}<ul><tpl for="items"><li>{title} ({type})</li></tpl></ul></tpl>

Any idea?

Answer 1

I think you don't need to assign a variable for model registration.

Ext.regModel("Tag", {
    fields : [ {
        name : "id",
        type : "int"
    }, {
        name : "name",
        type : "string"
    }], 
    associations : {
        type : "hasMany",
        model : "TagItem", 
        name : "items"
    }
});

So;

Ext.regModel("TagItem", {
    fields : [ {
        name : "id",
        type : "int"
    }, {
        name : "title",
        type : "string"
    }, {
        name : "type", 
        type : "string"
    }, {
        name : "tag_id", 
        type : "int"
    }], 
    associations : {
        belongsTo : {
            model : "Tag",
            name : "items"
        }
    }
});

Add reader to json and correct registered model names.

TagStore:

app.stores.tagItems = new Ext.data.Store({
    model : "TagItem", //Use registered name
    proxy : {
        type : 'scripttag',
        url : 'http://www.s-lab.cz/ios/api/tags.php'

                   reader: { //add reader to read from json
                      type: 'json',
                      root: 'results'
                   }
    }
});

Tags:

app.stores.tags = new Ext.data.Store({
    model : "Tag", //Use registered name
    proxy : {
        type : 'scripttag',
        url : 'http://www.s-lab.cz/ios/api/tags.php'
                   reader: { //add reader to read from json
                      type: 'json',
                     root: 'results'
                   }
    }
});

And finally maybe you need to change your json format in tags.php as;

{"results":[
 {
    "id":1,
    "name":"Doktor",
    "url":"doktor",
    "items":[
       {
          "type":"video",
          "id":1,
          "title":"First tag item",
          "tag_id":1
       },
       {
          "type":"article",
          "id":1,
          "title":"Second tag item - article",
          "tag_id":1
       },
       {
          "type":"article",
          "id":2,
          "title":"Third tag item - article",
          "tag_id":1
       },
       {
          "type":"video",
          "id":2,
          "title":"Fourth tag item",
          "tag_id":1
       }
    ]
 },
 {
    "id":2,
    "name":"Nemocnice",
    "url":"nemocnice"
 },
 {
    "id":3,
    "name":"Sestra",
    "url":"sestra"
     }
  ]
}

I hope it works or helps to correct your code.