脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ExtJs4.0.7 Dynamic tree 动态菜单树，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 ExtJs4.x 出来很久了，一直都比较感兴趣，之前因工作原因一直在用@R_406_2777@，近来终于有时间来学习ExtJs4.0.7，发现跟ExtJs3版本有很大的差别，具体的细节不在这里写了，因为有好多大牛已经总结好了，吾等屁民也是跟随着这些大牛的脚印一步一步向前走的；区别详见：https://www.hzuwando.COM/blog/MyBLOGContent.aspx?user=luxiaoyong&id=79

 

今天主要总结一下开发动态菜单树的历程，废话不多说，直接上代码。

 

1.定义一个数据模型 menuInfo

 

[javascript]  

Ext.regModel('menuInfo', {  

    fields : [ {  

        name : 'id',  

        tyPE : 'string',  

        defaultValue : null  

    }, {  

        name : 'text',  

        type : 'string',  

        defaultValue : null  

    }, {  

        name : 'leaf',  

        type : 'bool',  

        defaultValue : false  

    }, {  

        name : 'cls',  

        type : 'string',  

        defaultValue : null  

    }, {  

        name : 'iconCls',  

        type : 'string',  

        defaultValue : null  

    }, {  

        name : 'page',// 自定义  

        type : 'string',  

        defaultValue : null  

    }   

    ]  

});  

 

 

 

该模型用来解析Json数据，其中page是自定义的属性，如果没有需要扩展的属性，完全可以用Ext.tree.Panel提供的属性，该步骤可以省略；

 

2.定义一个TreeStore

 

[javascript 

VAR store = Ext.create('Ext.data.TreeStore', {  

    model : 'menuInfo',// 用指定的数据模型来接收数据，如果不用自定义的数据模型可以不写  

    Proxy : {  

        type : 'ajax',  

        url : 'index_inITMenubar.do'  

    },// 定义一个数据代理  

    root : {  

        text : '根节点',  

        id : '0',  

        expanded : true  

    },  

    folderSort : true,  

    sorters : [ {  

        PRoperty : 'text',  

        direction : 'ASC'  

    } ]  

});  

这个就不解释了吧，看注释都可以明白的；

 

3.定义一个TreePanel

 

[javascript]  

var tree = Ext.create('Ext.tree.Panel', {  

        store : store,  

        rootVisible : false,  

        viewconfig : {  

            plugins : {  

                ptype : 'treeviewDragdrop'  

            }  

        },  

        renderTo : Ext.getBody(),  

        height : 600,  

        autoScroll : true,  

        useArrows : true,  

        dockedItems : [ {  

            xtype : 'toolbar',  

            items : [ {  

                text : '展开',  

                handler : function() {  

                    tree.expandAll();  

                }  

            }, {  

                text : '收缩',  

                handler : function() {  

                    tree.collapseAll();  

                }  

            } ]  

        } ]  

    });  

 

OK，到此JS代码已经完毕，接下来看后台代码；

 

[java]  

<span style="white-space:pre">  </span>public JSONArray getTreeNodes(String node,int uid) {  

        List<Menubar> mblist = indexDAO.getTreeNodes(node,uid);  

        JSONArray JSON = new JSONArray();  

        for (int i = 0; i < mblist.size(); i++) {  

            JSONObject child = new JSONObject();  

            Menubar mb = mblist.get(i);  

            child.put("id", mb.getId());  

            child.put("text", mb.getText());  

[java]  

    if (GMUtils.iSEMpty(mb.getPage())) {  

        child.put("leaf", false);  

        child.put("cls", "folder");  

    } else {  

        child.put("leaf", true);  

        child.put("cls", "file");  

        child.put("page", mb.getPage());  

    }  

    json.add(child);  

}  

return json;  

这里要说明一下，因为菜单是异步获取的，TreeStore获取数据时会传过来一个node，即你所点击的节点id，root中定义根节点id为0；

Java代码中根据node获取它的子节点，然后遍历、拼装json数据，我的数据表结构比较简单，Menubar中page为空时说明该节点不是最终子节点，即leaf=false，cls=folder；page不为空时，说明该节点是叶子节点，leaf=true，cls=file；把json数据拼装好之后，转成字符串返回就ok！

 

效果图：

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-ExtJs4.0.7 Dynamic tree 动态菜单树全部内容，希望文章能够帮你解决javascript代码实例教程-ExtJs4.0.7 Dynamic tree 动态菜单树所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。