直接用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. Nginx可以做什么？（转载）

    本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文本身也可能介绍的不完整,毕竟只是我个人使用过和了解到过得,欢迎留言交流. Nginx能做什么 —— ...

  2. 【spring源码分析】IOC容器解析

    参考: https://www.iteye.com/topic/1121913(自动注入bean的扫描器) https://m.imooc.com/mip/article/34150(循环依赖的解决方 ...

  3. Spring cloud微服务安全实战-7-1章节概述

    前面的章节都是围绕这微服务的安全在讲一些东西,包括微服务本身api的安全.网关的安全.怎么去做安全中心,包括认证服务器,权限的服务.权限的设计,怎么来实现SSO.然后sentinel来实现统一的熔断, ...

  4. [LeetCode] 273. Integer to English Words 整数转为英文单词

    Convert a non-negative integer to its english words representation. Given input is guaranteed to be ...

  5. [LeetCode] 505. The Maze II 迷宫 II

    There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...

  6. MiniProfiler 来分析 ASP.NET Core

    使用 MiniProfiler 来分析 ASP.NET Core 应用   使用 MiniProfiler 来分析 ASP.NET Core 应用 MiniProfiler(https://minip ...

  7. Hack The Box Web Pentest 2017

    [20 Points] Lernaean [by [Arrexel] 问题描述: Your target is not very good with computers. Try and guess ...

  8. Spring MVC 问题归纳

    记录一些在Spring MVC配置中出现的问题 一.配置tomcat包没有加载 错误: idea调试web项目时出现:java.lang.ClassNotFoundException:org.spri ...

  9. Docker简易安装及命令实例

    docker ~ ~ ~ Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中, ...

  10. AVR单片机教程——数字输入

    我们已经学习了如何使用按键和拨动开关,不知你有没有好奇 button_down 和 switch_status 等函数是如何实现的.本篇教程带你一探究竟,让我们从按键的原理开始. 在原理图中,按键的符 ...