EXT JS 3 TreePanel問題：樹未顯示

Question

我的TreePanel有一個令人討厭的問題：我使用TreeLoader從一個url中獲取數據。示例樹在我的面板中正確呈現，所以問題應該在自定義數據中。 我通過一個python cgi獲取我的數據，它逐步建立要編寫的字符串。 這是TreePanel中代碼：

var Tree = Ext.tree; 

var tree = new Tree.TreePanel({ 
    useArrows: true, 
    autoScroll: true, 
    animate: true, 
    enableDD: true, 
    containerScroll: true, 
    border: false, 
    // auto create TreeLoader 
    dataUrl: '../python/tree/get_tree', 

    root: { 
     nodeType: 'async', 
     text: '369', 
    } 
}); 

由Python CGI寫入的數據如下：

[{ 
    id: 476, 
    text: 'memShared', 
    leaf: true 
},{ 
    id: 477, 
    text: 'icmpInParmProbs', 
    leaf: true 
},{ 
    id: 478, 
    text: 'memTotalFree', 
    leaf: true 
},{ 
    id: 479, 
    text: 'icmpOutEchos', 
    leaf: true 
},{ 
    id: 480, 
    text: 'memAvailReal', 
    leaf: true 
},{ 
    id: 481, 
    text: 'icmpInAddrMaskReps', 
    leaf: true 
},{ 
    id: 482, 
    text: 'icmpInRedirects', 
    leaf: true 
},{ 
    id: 483, 
    text: 'loadavg1', 
    leaf: true 
},{ 
    id: 484, 
    text: 'tcpCurrEsta', 
    leaf: true 
},{ 
    id: 485, 
    text: 'icmpInErrors', 
    leaf: true 
},{ 
    id: 486, 
    text: 'icmpInMsgs', 
    leaf: true 
},{ 
    id: 498, 
    text: 'icmpInTimeExcds', 
    leaf: true 
},{ 
    id: 499, 
    text: 'tcpActiveOpens', 
    leaf: true 
},{ 
    id: 500, 
    text: 'eCpuRawNice', 
    leaf: true 
},{ 
    id: 512, 
    text: 'icmpOutTimeExcds', 
    leaf: true 
},{ 
    id: 513, 
    text: 'icmpInEchos', 
    leaf: true 
},{ 
    id: 514, 
    text: 'memBuffe', 
    leaf: true 
},{ 
    id: 515, 
    text: 'icmpInSrcQuenchs', 
    leaf: true 
},{ 
    id: 516, 
    text: 'icmpOutErrors', 
    leaf: true 
},{ 
    id: 517, 
    text: 'tcpAttemptFails', 
    leaf: true 
},{ 
    id: 518, 
    text: 'icmpOutAddrMaskReps', 
    leaf: true 
},{ 
    id: 519, 
    text: 'tcpOutSegs', 
    leaf: true 
},{ 
    id: 520, 
    text: 'loadavg15', 
    leaf: true 
},{ 
    id: 521, 
    text: 'tcpRetransSegs', 
    leaf: true 
},{ 
    id: 522, 
    text: 'tcpEstabResets', 
    leaf: true 
},{ 
    id: 523, 
    text: 'icmpOutTimestamps', 
    leaf: true 
},{ 
    id: 524, 
    text: 'memTotalReal', 
    leaf: true 
},{ 
    id: 525, 
    text: 'icmpOutTimestmpReps', 
    leaf: true 
},{ 
    id: 526, 
    text: 'icmpOutDestUnreachs', 
    leaf: true 
},{ 
    id: 527, 
    text: 'tcpPassiveOpens', 
    leaf: true 
},{ 
    id: 528, 
    text: 'memTotalSwap', 
    leaf: true 
},{ 
    id: 529, 
    text: 'tcpInSegs', 
    leaf: true 
},{ 
    id: 530, 
    text: 'icmpOutSrcQuenchs', 
    leaf: true 
},{ 
    id: 531, 
    text: 'icmpInTimestampReps', 
    leaf: true 
},{ 
    id: 532, 
    text: 'icmpOutEchoReps', 
    leaf: true 
},{ 
    id: 533, 
    text: 'tcpOutRsts', 
    leaf: true 
},{ 
    id: 534, 
    text: 'icmpInAddrMasks', 
    leaf: true 
},{ 
    id: 535, 
    text: 'memSwapErro', 
    leaf: true 
},{ 
    id: 536, 
    text: 'eCpuRawIdle', 
    leaf: true 
},{ 
    id: 537, 
    text: 'eCpuRawKernel', 
    leaf: true 
},{ 
    id: 538, 
    text: 'memAvailSwap', 
    leaf: true 
},{ 
    id: 539, 
    text: 'tcpInErrors', 
    leaf: true 
},{ 
    id: 540, 
    text: 'icmpOutAddrMasks', 
    leaf: true 
},{ 
    id: 541, 
    text: 'icmpOutRedirects', 
    leaf: true 
},{ 
    id: 542, 
    text: 'eCpuRawSystem', 
    leaf: true 
},{ 
    id: 543, 
    text: 'eCpuRawInterrupt', 
    leaf: true 
},{ 
    id: 544, 
    text: 'icmpOutMsgs', 
    leaf: true 
},{ 
    id: 545, 
    text: 'icmpInTimestamps', 
    leaf: true 
},{ 
    id: 546, 
    text: 'icmpInEchoReps', 
    leaf: true 
},{ 
    id: 547, 
    text: 'eCpuRawWait', 
    leaf: true 
},{ 
    id: 548, 
    text: 'eCpuRawUse', 
    leaf: true 
},{ 
    id: 549, 
    text: 'memCached', 
    leaf: true 
},{ 
    id: 550, 
    text: 'loadavg5', 
    leaf: true 
},{ 
    id: 551, 
    text: 'icmpInDestUnreachs', 
    leaf: true 
},{ 
    id: 552, 
    text: 'icmpOutParmProbs', 
    leaf: true 
},{ 
id: 501, 
text: e, 
children: [{ 
    id: 502, 
    text: 'ifInOctets', 
    leaf: true 
},{ 
    id: 503, 
    text: 'ifOutUcastPkts', 
    leaf: true 
},{ 
    id: 504, 
    text: 'ifOutNUcastPkts', 
    leaf: true 
},{ 
    id: 505, 
    text: 'ifInDiscards', 
    leaf: true 
},{ 
    id: 506, 
    text: 'ifOutDiscards', 
    leaf: true 
},{ 
    id: 507, 
    text: 'ifInErrors', 
    leaf: true 
},{ 
    id: 508, 
    text: 'ifOutOctets', 
    leaf: true 
},{ 
    id: 509, 
    text: 'ifOutErrors', 
    leaf: true 
},{ 
    id: 510, 
    text: 'ifInUcastpkts', 
    leaf: true 
},{ 
    id: 511, 
    text: 'ifInNUcastpkts', 
    leaf: true 
}]},{ 
    id: 487, 
    text: 'dskIndex', 
    children: [{ 
id: 488, 
text: '('1',)', 
children : [{ 
    id: 489, 
    text: 'ns-dskUsed', 
    leaf: true 
},{ 
    id: 490, 
    text: 'ns-dskPercent', 
    leaf: true 
},{ 
    id: 491, 
    text: 'ns-dskAvail', 
    leaf: true 
},{ 
    id: 492, 
    text: 'ns-dskTotal', 
    leaf: true 
}]},{ 
id: 493, 
text: '('2',)', 
children : [{ 
    id: 494, 
    text: 'ns-dskUsed', 
    leaf: true 
},{ 
    id: 495, 
    text: 'ns-dskPercent', 
    leaf: true 
},{ 
    id: 496, 
    text: 'ns-dskAvail', 
    leaf: true 
},{ 
    id: 497, 
    text: 'ns-dskTotal', 
    leaf: true 
}]}]}] 

我想不通的問題是什麼，括號應該正確地平衡和螢火蟲不會產生任何錯誤。這個字符串沒有很好地形成嗎？還是有另一種方式，使我的treepanel無法正常工作？非常感謝您提供的任何幫助！

Answer 1

您是否注意到text: e, ID爲501的節點的一部分？ 與id: 488, text: '('1',)'和id: 493, text: '('2',)',相同的問題。 這些字符串以不正確的格式傳遞。修復它們允許ExtJS構建一個樹（在本地嘗試）。

您正在搜索的錯誤在eval聲明 - ExtJS嘗試評估您的服務器在幕後的響應，並且由於形成不正確的json而無法執行此操作。

你可以在json.org閱讀關於json格式。

有一個python json encoder從Python 2.6開始，你可以依靠它來生成json。

Answer 2

在您的數據上運行jsonlint顯示此錯誤。修復並再次運行代碼。

Parse error on line 2: 
[ {  id: 476,  tex 
--------------^ 
Expecting 'STRING', '}