EXT JS 3 TreePanel problem: tree not shown

Question

i've a nasty problem with my TreePanel: i use a TreeLoader to get data from an url. An example tree is correctly rendered in my panel so the problem should be in the custom data. I get my data through a python cgi which builds step by step the string to write. This is the TreePanel code:

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

The Data written by the python cgi is the following:

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

I can't figure out what the problem is, parenthesis should be correctly balanced and firebug doesn't raise any error. Is this string not well formed? Or is there another way which makes my treepanel not working? Thank you very much for any help provided!

Li0liQ Li0liQ · Accepted Answer · 2011-08-24T16:19:13

Have you noticed text: e, part of the node with id 501? The same issue with id: 488, text: '('1',)' and id: 493, text: '('2',)',. Those strings are passed in incorrect format. Fixing them allows ExtJS to build a tree(tried locally).

The error you are searching for is in eval statement - ExtJS tries to evaluate the response from your server behind the scenes and fails to do that due to incorrectly formed json.

You could read about json format at json.org.

There is a python json encoder starting from python 2.6 you could rely on for generating json.

EXT JS 3 TreePanel problem: tree not shown

2 Answers