【问题标题】:Association Sample in extjs 4.2:extjs 4.2 中的关联示例:
【发布时间】:2014-05-10 01:36:26
【问题描述】:

谁能指出 ExtJS 中关联的工作示例(使用 hasMany 和 belongsTo)。请不要将我指向 Sencha 文档或任何与 Sencha 相关的示例,因为我几乎尝试了所有方法,但它们都不起作用......

【问题讨论】:

    标签: extjs


    【解决方案1】:

    运行示例(打开浏览器控制台):

    http://jsfiddle.net/4TSDu/52/

    Ext.define('My.model.Author', {
        extend:'Ext.data.Model',
        fields:[
            'name'
        ]
    });
    
    Ext.define('My.model.Comment', {
        extend:'Ext.data.Model',
        fields:[
            'emailAddress',
            'body'
        ]
    });
    
    Ext.define('My.model.BlogPost', {
        extend:'Ext.data.Model',
        fields:[
            'title',
            'body'
        ], 
         belongsTo:[
            {
                name:'author',
                instanceName:'author',
                model:'My.model.Author',
                getterName:'getAuthor',
                setterName:'setAuthor',
                associationKey:'author'
            }
        ], 
        hasMany:[
            {
                name:'comments',
                model:'My.model.Comment',
                associationKey:'comments'
            }
        ], 
        proxy:{
            type:'ajax',
            url:'https://dl.dropboxusercontent.com/u/1015920/Ext/blog-posts.json',
            reader:{
                type:'json',
                root:'data'
            }
        }
    });
    
    My.model.BlogPost.load(1, {
    
        success:function(record, operation){
    
            console.log(record.get('title')); // "some title"
    
            console.log(record.getAuthor().get('name')); // "neil"
    
            console.log(record.comments().getCount()); // 2
    
        }
    });
    

    在这里阅读更多:

    http://extjs-tutorials.blogspot.ca/2012/05/extjs-belongsto-association-rules.html

    http://extjs-tutorials.blogspot.ca/2012/05/extjs-hasmany-relationships-rules.html

    使用的样本数据:

    {
        "data": [
            {
                "id": 1,
                "title": "some title",
                "body": "some body",
                "author": {"id":1, "name": "neil"},
                "comments": [
                    {
                        "id":55,
                        "emailAddress": "user@example.com",
                        "body": "test comment"
                    },
                    {
                        "id":66,
                        "emailAddress": "user2@example.com",
                        "body": "another comment"
                    }
                ]
            }
        ]
    }
    

    【讨论】:

    • 嗨,尼尔,很抱歉我的回复延迟了。我试图运行它,但无法在控制台中获得任何输出。我将整个代码放在一个 onReady 函数中,使用您提到的数据创建了一个 json 文件。正在获取数据(检查了萤火虫控制台),但似乎从未调用过成功函数。而且我无法在您提供的 jsFiddle 中看到任何控制台输出。如果我在这里做错了什么,请告诉我...
    • 在 chrome、firefox 和 safari 中测试/工作。我正在使用远程数据,所以在 IE 中不起作用(尽管可能在 IE10 中)。你用的是哪个?
    • 嗨 Neil,我尝试使用 firefox 20.0.1、chrome 26.0 和 IE 8。我发现 json 文件本身现在没有在 jsFiddle 中获取,这是由于防火墙和安全设置(公司的政策)。有没有办法在 JsFiddle 中添加内联数据。另外,请让我知道我尝试从 eclipse 运行示例的方式是否正确(在我之前的评论中)。在那里我能够获取 json 数据,但从未调用过成功函数。我用安装了 firebug 的 firefox 20 进行了尝试...
    • 你能把json文件放在内部服务器上吗?
    • 嗨..我已经将它作为 json (localhost:8080/QAFWeb/data/data.json) 和文本文件 (localhost:8080/QAFWeb/data/data.txt) 放在我的 tomcat 服务器中,它显示状态消息为 200 OK 但是当我检查了萤火虫,文件大小为0kb。在检查请求时,我发现没有响应选项卡,只有 Params 和 Header 选项卡。我还发现在标题选项卡中Accept 参数的值为text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8,所以我尝试将其放置为 html 文件,但文件大小仍然为 0kb。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-07-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多