EXT4.1 tree整理

最近研究一下EXT4.1 Tree 加载 ,参考了一下API和网上的分享,分享一下成果,

构造treepanel

var orglist = new Ext.widget({
        xtype: 'treepanel',
        id:'orglist',
        lines : false,
        title : "XXXX",
        width : 150,
        minSize : 100,
        maxSize : 200,
        region : "west",
        split : true,
        autoScroll : true, // 自动滚动
        collapsible : true,
        containerScroll : true,// 是否支持滚动条
        rootVisible : false, // 是否隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
        border : true, // 边框
        animate : true,// 动画效果
        listeners : {
            'beforeload':function(store,operation,eOpts) {
                url =  encodeURI(path+'/org/key/getOrgTree'+'?id=' + operation.node.data.id);//id标示点击的父节点 ,动态加载不会一次加载都有子节点
                store.proxy.url = url;
            },
            "itemclick":function(view,record,item,index,e ){  //点击树事件  此处为菜单树,点击菜单,右侧展示相应信息  可忽略此事件
                var id=record.data.id;         //节点id
                var text=record.data.text; //节点显示内容
                var d=orgmessage.items.get(id);      //orgmessage为右侧tabpanel与tree主题无关可忽略
                if (d == null) {
                    var tp = new Ext.widget({
                        xtype: 'panel',
                        id : id,
                        title : text,
                        html : '<iframe src="'
                                 +path+'XXXX.jsp?Id='+id
                                + '" width="100%" height="100%" frameborder="0" style="border:0" scrolling="auto"></iframe>'
                     });
                    orgmessage.add(tp).show();   //显示tab页
                }
                
            }
        },
        store: store     //动态加载数据
    });

       //

       var store = Ext.create('Ext.data.TreeStore', {
          proxy: {
                type: 'ajax',
                url: path+'/org/key/getOrgTree'   //加载节点信息
            },
          root: {    跟节点
                text: '1',
                id: '1',
                expanded: true
            },
            folderSort: true,
            sorters: [{        //排序
                property: 'text',
                direction: 'ASC'
            }]
        });


 直接显示参考API

root: { expanded: true, text: "My Root", children: [ { text: "Child 1", leaf: true }, { text: "Child 2", expanded: true, children: [ { text: "GrandChild", leaf: true } ] } ] }

EXT4.1 不在支持AsyncTreeNode     

              root : new Ext3.tree.AsyncTreeNode({
                        text : root.tagName,
                        xmlNode : root
                    }),



   



你可能感兴趣的:(EXT4.1 tree整理)