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是否唯一