当前位置:编程学习 > JS >>

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

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,  //是否显示根节点
 &

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,