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

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

来源：岁月联盟 编辑：exp 时间：2012-09-27

-

-

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

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,
                        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
    // 500
    //containerScroll:true  
    });
var treepanel2 = Ext.create('Ext.tree.Panel', {
        //title: '简单的树形组件',
        store: treeStore1,
        animate:true,
        autoScroll:true,  //如果超出范围带自动滚动条
        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,
                        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]
    });
});