直接用JSON创建树形控件（Ext.tree.TreePanel ）

1、创建多个根节点的树形

2、直接使用JsonList创建树形

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta name="keywords" content="Extjs, Ext, Ext JS, Ext JavaScript, example, fully loaded tree example, static tree, tree example Ext" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Fully Loaded Tree</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />

<mce:script type="text/javascript" src="../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>

<mce:script type="text/javascript" src="../../ext-all.js" mce_src="ext-all.js"></mce:script>

<mce:script type="text/javascript" src="../../ext-lang-zh_CN.js" mce_src="ext-lang-zh_CN.js"></mce:script>

<mce:script type="text/javascript"><!--

Ext.onReady(function(){  

    // json data describing the tree

    var json = [

    {"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [

        {"text" : "A3", "id" : 10001, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "A4", "id" : 10002, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "A6", "id" : 10003, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "A8", "id" : 10004, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Q7", "id" : 10005, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "S4", "id" : 10006, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "S6", "id" : 10007, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "S8", "id" : 10008, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "TT", "id" : 10009, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        }]

    },

    {"text" : "BMW", "id" : 200, "leaf" : false, "cls" : "folder", "children" : [

        {"text" : "3 Series Convertible", "id" : 10001, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "3 Series Coop", "id" : 10002, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "3 Series Sedan", "id" : 11000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "3 Series Sports Wagon", "id" : 21000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "5 Series", "id" : 31000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "6 Series", "id" : 41000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "7 Series", "id" : 51000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "M", "id" : 61000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "M3", "id" : 71000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "M5", "id" : 81000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "M6", "id" : 91000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "X3", "id" : 101000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "X5", "id" : 111000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Z4", "id" : 121000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        }]

    },

    {"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [

        {"text" : "CTS", "id" : 11000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "CTS-V", "id" : 21000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "DTS", "id" : 31000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Escalade", "id" : 41000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Escalade - ESV", "id" : 51000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Escalade - EXT", "id" : 61000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "SRX", "id" : 71000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "STS", "id" : 81000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "STS-V", "id" : 91000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "XLR", "id" : 111000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "XLR-V", "id" : 121000, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        }]

    },

    {"text" : "Jaguar", "id" : 400, "leaf" : false, "cls" : "folder", "children" : [

        {"text" : "S-Type", "id" : 11, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "X-Type", "id" : 22, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "XJ-Series", "id" : 33, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "XK-Series", "id" : 44, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        }]

    },

    {"text" : "Maserati", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : [

        {"text" : "Coupe", "id" : 10200, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Grand Sport", "id" : 10300, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Quattroporte", "id" : 10400, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        }]

    },

    {"text" : "Porsche", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : [

        {"text" : "911 Carrera", "id" : 123, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "911 Carrera 4", "id" : 90, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "911 Turbo", "id" : 789, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Boxster", "id" : 56, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Cayenne", "id" : 334, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        },

        {"text" : "Cayman", "id" : 222, "leaf" : false, "cls" : "folder", "children" :

            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},

              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},

              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},

              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},

              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}

            ]

        }]

    }

    ];  

    // shorthand

    var Tree = Ext.tree;  

    var tree = new Tree.TreePanel(

        //'tree',

        {

        title:'选项列表',

        width: 200,

        height:300,

        root:root,

        animate: true,//是否动画

        useArrows: true,//树形目录使用visit中树目录显示效果(三角形代替+号)

        rootVisible : false,//顶节点是否显示、设置成false后顶节点的子节点就作为顶节点（可以有多个子节点作为顶节点）

        enableDD:false,

        loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()

        lines: true,

        selModel: new Ext.tree.MultiSelectionModel(),

            containerScroll: false

        });  

    // set the root node

    var root = new Tree.TreeNode({

        text: 'Autos',

        draggable:false,

        id:'source'

    });  

    tree.setRootNode(root);  

    var objLoader = tree.getLoader();

    for(var i = 0, len = json.length; i < len; i++) {

        root.appendChild(objLoader.createNode(json[i]));

    }  

    tree.render(document.body);

    root.expand();   

});

// --></mce:script>

</head>

<body>

<div id="tree"></div>

</body>

</html>

[JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）(转)的更多相关文章

  1. VS2010/MFC编程入门之三十一（常用控件：树形控件Tree Control 下）

    前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建.CTreeCtrl类的主要成员函数和应用实例. 树形控件的创建 MFC为树形控件提 ...

  2. VS2010-MFC（常用控件：树形控件Tree Control 下）

    转自:http://www.jizhuomi.com/software/203.html 前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件 ...

  3. 树形控件QTreeWidget

    import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QApplication, QWidget, QTreeWidge ...

  4. Web应用程序开发，基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

  5. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  6. Extjs树形控件入门

    Extjs树形控件由Ext.tree.TreePanel类定义,控件的名称为TreePanel,TreePanel继承自Panel类,在Extjs中使用树形控件其实很简单. 大家知道要使用Extjs必 ...

  7. 直接用bcdedit创建bootmgr数据库和修复启动菜单

    直接用bcdedit创建bootmgr数据库和修复启动菜单 使用下面方法之前需要bcdedit和bootsect两条命令,这两条命令可以到vista或者windows 7安装光盘上获得.bootsec ...

  8. js树形控件—zTree使用总结

    0 zTree简介 树形控件的使用是应用开发过程中必不可少的.zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 0.0 ...

  9. jQuery树形控件zTree使用小结

    作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...

随机推荐

  1. Extjs与Vue技术优劣势比较

    此技术只变更PLM的表单化的页面显示风格,不涉及不影响整个现有平台的架构和蓝图

  2. [LeetCode] 412. Fizz Buzz 嘶嘶嗡嗡

    Write a program that outputs the string representation of numbers from 1 to n. But for multiples of ...

  3. -bash: /usr/bin/rm: 参数列表过长

    解决方法: find ./ -type f -name "*.nasl"|xargs rm -f find ./ -type f -name "*.*"|xar ...

  4. python+lego ev3的心得总结 随时更新

    一.连接方面 1.试了蓝牙连接,被电脑防火墙拒绝了很多次,很奇怪,明明都pin码都对上了,然后瞬间被踢开. 2.数据线直连,在一台win7上怎么试也不行,在另一台上自动上windows update上 ...

  5. Influx Sql系列教程八：query数据查询基本篇

    前面几篇介绍了InfluxDB的添加,删除修改数据,接下来进入查询篇,掌握一定的SQL知识对于理解本篇博文有更好的帮助,下面在介绍查询的基础操作的同时,也会给出InfluxSql与SQL之间的一些差别 ...

  6. 本地yum源 、阿里yum源、163yum源的配置安装

    一.本地yum源 (我使用的7.3版本) 1..添加一个新的yum源配置文件dvd.repo(文件名字自定义) vi etc/yum.repos.d     添加新的内容: name=rhel_dvd ...

  7. python学习67-面向对象-封装

    封装 1.什么是封装? 根据名字寓意为:把一个东西装起来,然后密封,类似这样的面向对象的编程为封装. 真正的封装是明确的区别内外,只能在内部用,外部无法调用. 2. 举例: class Car: _s ...

  8. 20190715《Python网络数据采集》第 1 章

    <Python网络数据采集>7月8号-7月10号,这三天将该书精读一遍,脑海中有了一个爬虫大体框架后,对于后续学习将更加有全局感. 此前,曾试验看视频学习,但是一个视频基本2小时,全部拿下 ...

  9. 我在LeetCode的首次刷题

    到现在为止,我才发现我的博客一篇感受,心得,体会之言都没有. 今天就来随便扯扯. 刷题,是我最近一直在干的事情.也就每天写一两个.忘了就没写这种.也收藏了好几个刷题网站,当然第一次接触肯定是 WUST ...

  10. 「LibreOJ NOI Round #2」不等关系

    「LibreOJ NOI Round #2」不等关系 解题思路 令 \(F(k)\) 为恰好有 \(k\) 个大于号不满足的答案,\(G(k)\) 表示钦点了 \(k\) 个大于号不满足,剩下随便填的 ...