折翼的飞鸟

导航

Extjs中创建Tree菜单【一】

    此篇treepanel的描写是很简单,没有太大的难度,在学习时,可以先熟悉tree的一些配置信息、属性、方法和事件。

然后先写一个简单的例子,慢慢了解从中如何实现的,然后在慢慢的深入了解,实现一些复杂的效果。

在实现此效果的同时,发现一个问题,就是如果节点的id设置相同,tree首次展现是没有问题,但点击节点展开和收缩会发现数据在莫名其妙的增加,

同时节点会出现混乱的状况,如果用户同时又单击节点,触发其他效果的,严重可能会导致浏览器崩溃。在此要留意数据id不能重复。

 

以下就开始贴出实现的代码:

            Ext.onReady(function(){
                // Ext.Msg.alert("提示","hello world")

                var treeData = [
                    {id:"1001",name:"wind",tel:"18603071234"}, {id:"1002",name:"小月",tel:"18603073578"},
                    {id:"1003",name:"冷清雪",tel:"18603073569"}, {id:"1004",name:"布隆",tel:"18603073214"},
                    {id:"1005",name:"莫甘娜",tel:"18603072568"}, {id:"1006",name:"阿里",tel:"18603073247"},
                    {id:"1007",name:"阿卡丽",tel:"18603071563"}, {id:"1008",name:"卡特",tel:"18603071234"},
                    {id:"1009",name:"死歌",tel:"18603071234"}, 
                ]

                var children = [] 
                for(var i in treeData)
                {
                    children.push({ text: treeData[i].name, id: treeData[i].id, leaf: true });
                }
                
                var treeStore = Ext.create('Ext.data.TreeStore', {
                    root: {
                        text:"活动",
                        id: 0,
                        expanded: true, //设置节点展开
                        children: children
                    }
                }); 
                 
                //创建TreePanel  
                var treePanelObj = Ext.create("Ext.tree.Panel", {
                    region: "west",
                    header: false,
                    border: false,  
                    height:500,
                    autoScroll: true,
                    animate: true, 
                    rootVisible: true,  //设置根节点显示
                    collapsible: true,
                    // cls: "GridTree",
                    // style:"margin-top:0px;",
                    store: treeStore,
                    listeners:{ 
                        itemclick: function (view, record, item, index, e, eOpts) {
                            // 单击节点事件,包括根节点
                            // 此处代码自己可以实现。。。
                        },
                        load:function(){
                            // 此处可以设置节点默认被选中
                        }
                    }
                }); 

                //选中后激活itemclick事件里的内容需要 绑定select事件才可以
                var treeRecord = treePanelObj.getRootNode().getChildAt(0);
                var id = treeRecord.data.id;// 获取节点ID数据
                //设置选中节点被选中状态
                treePanelObj.getSelectionModel().select(treeRecord, false, false);
              
                var win = Ext.create("Ext.window.Window",{
                    width:400,
                    height:500,
                    id:"MyTreeWindow",
                    title:"Tree菜单显示",
                    items:treePanelObj
                });

                win.show();

            });

显示效果:

 

异常原因:

    如果展开和收缩节点,出现节点混乱问题,先确定节点的id是否唯一

 

 

posted on 2017-03-07 20:39  折翼的飞鸟  阅读(397)  评论(0编辑  收藏  举报