如何在Sencha Touch中实现分层模型

How to implement hierarchical model in Sencha Touch

本文关键字：实现 分层 模型 Touch Sencha      更新时间：2023-09-26

我已经阅读了许多问题/答案和教程，但我仍然无法在Sencha Touch中实现分层模型。根模型是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'
    }
});

标记:

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

当我尝试从商店加载项目时，我得到:

Uncaught TypeError: Cannot call method 'read' of undefined

我的JSON是这样的:

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"
     }
  ]);

更新:

我根据建议修改了代码，结果JSON是这样的:

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"
    }]
});

但我仍然无法访问后续项目:app.stores.tags.getAt(0)工作，但app.stores.tags.getAt(0).TagItems()不能(app.stores.tags.getAt(0).items或app.stores.tags.getAt(0).items()都不能)。而且我的模板没有正确渲染:<tpl for=".">{name}<ul><tpl for="items"><li>{title} ({type})</li></tpl></ul></tpl>

任何想法?

我认为你不需要为模型注册分配变量 

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

;

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"
        }
    }
});

在json中添加reader并更正注册的模型名

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'
                   }
    }
});

标记:

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'
                   }
    }
});

最后，你可能需要将tag。php中的json格式更改为;

{"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"
     }
  ]
}

我希望它工作或帮助纠正你的代码。

相关文章：