javascript - 为什么我的 fiddle 行为不正确？

Question

我想要呈现为树的 JSON 是

{
    "productOfferings": [
        {
            "text": "Mobile subscription with Internet access 2GB and iPad 32GB",
            "description": "Joors 2GB mobile broadband and iPad 32GB",
            "productOfferings": [
                {
                    "id": 5,
                    "text": "Ipad with 32 GB storage",
                    "description": "A iPad 32 GB Product Offering",
                    "productSpecification": {
                        "id": 5,
                        "text": "IPad",
                        "description": ""
                    }
                },
                {
                    "id": 8,
                    "text": "Mobile subscription with Sim Card and Internet access 2GB",
                    "description": "Mobile subscription with Sim Card and Internet access 2GB",
                    "productSpecification": {
                        "id": 9,
                        "text": "Mobile subscription with sim card and Internet access",
                        "description": "Mobile subscription with sim card and Internet access",
                        "productSpecifications": [
                            {
                                "id": 2,
                                "text": "Mobile subscription with Sim Card",
                                "description": "This is the classic Subscription product of a Mobile Network totally void of Services, so it can only be used for accessing a HPLMN. Simply put a MSISDN + SIM"
                            },
                            {
                                "id": 4,
                                "text": "Mobile Internet access",
                                "description": "This is a GPRS Service for a Mobile Network Access Product for accessing Internet"
                            }
                        ]
                    }
                }
            ]
        }
    ]
}

我想用 extJS 渲染一棵树，就像在 jsonviewer.stack.hu 中渲染我的 json

我尝试用 fiddle 来做，但无法完成，而且 fiddle 有一些奇怪的地方:

http://jsfiddle.net/niklasro/auBTH/24/

当我让根不可见时，它就变成了两个根。很奇怪。并且无法设置 displayField，它必须具有名称“text”，但我不能仅仅因为 extJS 就更改我的 json。我希望文本字段的名称为“name”。我一直在尝试像 jsonviewer.stack 那样渲染 produtSpecification ，但如何做到这一点是不可理解的。你能帮我吗？

Answer 1

首先提示，ID 在 JSON 中必须是唯一的:http://my.jetscreenshot.com/6795/20131025-xarw-24kb