Extjs4.0.7 tree 结构读取json文件（在框架viewport中）

test.json 文件

{children:[
{id:'01',text:'a01',children:[
{id:'01-01',text:'a01-01',leaf:true},
{id:'01-02',text:'a01-02',children:[
{id:'01-02-01',text:'b01-02-01',leaf:true},
{id:'01-02-02',text:'a01-02-02',leaf:true}
]},
{id:'01-03',text:'b01-03',leaf:true}
]},
{id:'02',text:'b02',leaf:true}
]}

css样式：（注意传参数时leaf:'true'红色部分必须小写，不知什么原因，大写不起做用）

/*为节点的开闭状态和叶节点状态分别设置样式*/
 /* 如果没有.x-tree-icon-parent 将没有展开的后的图标，（展开和不展开图标一样）*/
.x-grid-tree-node-expanded  .x-tree-icon-parent{width:16px;background-image: url(../Images/icons/v3_expanded.ico)!important;}    

.x-tree-icon-parent{width:16px;background-image: url(../Images/icons/v3_collapsed.ico)!important;}    
.x-tree-icon-leaf{width:16px;background-image:url(../Images/icons/edit.png)!important;} 

viewport_tree.js

//--------------------------------------定义上边 top窗体----------------------------

var north=new Ext.Panel({
                        title: 'north',
                        region: 'north',
                        split: true,
                        border: true,
                        collapsible: true,
                        height: 80,
                        minSize: 100,
                        maxSize: 120
    });

//--------------------------------------定义右边 east窗体----------------------------

var east=new Ext.Panel({
                        title: 'east',
                        region: 'east',
                        split: true,
                        border: true,
                        collapsible: true,
                        width: 100,
                        minSize: 100,
                        maxSize: 120
    });

//--------------------------------------定义下边south窗体----------------------------

var south=new Ext.Panel({
                        title: 'south',
                        region: 'south',
                        split: false,
                        border: true,
                        height:80,
                        collapsible: true
    });

//--------------------------------------定义左边 west 窗体----------------------------

var treeStore1 = Ext.create('Ext.data.TreeStore', {
        autoLoad : true,
        proxy: {
            type: 'ajax',
            url: 'test.json.json',
            reader: {
                type: 'json',
                root: 'children'
                //record: 'node'
            }
        },
        sorters: [{
            property: 'leaf',
            direction: 'ASC'
        }],
        root: {
            nodeType: 'async',
            text: 'Ext JS',
            //id: '00',
            expanded: true
        }
    });

var treepanel1 = Ext.create('Ext.tree.TreePanel', {
    //如果超出范围带自动滚动条
    autoScroll:true,
    //animate:true,
    //root:root,
    //默认根目录不显示
    rootVisible:true,
    border:false,
    animate:true,
    lines:true,
    //enableDD:true,
    height:600,
    store:treeStore1
    //width: 500
    //containerScroll:true   
    });

var treepanel2 = Ext.create('Ext.tree.Panel', {
        //title: '简单的树形组件',
        store: treeStore1,
        animate:true,
        autoScroll:true,  //如果超出范围带自动滚动条
        width: 500,
        height:400,
        border:true,    //显示tree side frame
        //数据容器
        //loader:new Ext.tree.TreeLoader({url:"web/MenuTree.json"}),
        rootVisible: true,  //是否显示根节点
       // renderTo: Ext.getBody()
        containerScroll:true,
        listeners: {
            'itemclick': function (view, record) {
                    var leaf = record.get('leaf');
                    if (leaf) {
                       alert('is leaf!');
                        var id = record.get('id');
                        var text = record.get('text');
                        var tabPanel = Ext.getCmp('MAINPANEL');
/*
                    var tab = tabPanel.getComponent(id);
                    if (!tab) {
                        tabPanel.add(Ext.create('Tesz.App.Panels.' + id)).show();
                    }
                    tabPanel.setActiveTab(tab);
*/
                    }
                    else {
                        alert('not leaf!');
                        var expand = record.get('expanded')
                        if (expand) {
                            view.collapse(record);
                        }
                        else {
                            view.expand(record);
                    }
                }
            }
        }  //listeners -------funcation end----------
    });

var west=new Ext.Panel({
                        collapsible:true,   //自动收缩按钮
                        split: true,
                        border:false,
                        width:225,
                        layout:"accordion",
                        //extraCls:"roomtypegridbbar",  //添加动画效果
                        layoutConfig: {
                               animate: true
                         },
                        region:"west",
                        title:'威威系统',
                        items:[{
                            title:"<b>生产系统模块</b>",
                            autoScroll:true,
                            items:[treepanel2],
                            iconCls:"hotelmanageicon"
                        },{
                            title:"<b>人事薪资系统模块</b>",
                            autoScroll:true,
                            iconCls:"hotelmanageicon"
                            //items:[treenode]
                        },{
                            title:"<b>OA系统模块</b>",
                            autoScroll:true,
                            iconCls:"hotelmanageicon"
                            //items:[treenode]
                        },{
                            iconCls:"gonggao",
                            title:"<b><span style='color:red';>Hotel Notice</span></b>"
                            //items:[publishinfosgrid]
                        }]
    });

//------------------------------------------程序开始-------------------------------------
Ext.onReady(function () {
    //定义树形组件
    //Ext.Msg.alert('提示信息', '学习EXTJS');

    var vp=new Ext.Viewport({
        layout:"border",
        items:[north, east, west, center, south]
    });
});