ExtJs4中自带了扩展下拉组件,下面介绍一下如何使用
1、首先引入TreePicker.js,这个文件在下载的extjs4的Demo中可以找到
需要注意的是
(1)若jsp页面中写ext代码,则需要将TreePicker.js通过引用的方式引入
(2)若ext写在单独的js文件中,则需要通过Ext.require(['Ext.ux.TreePicker']);方式引入
2、将TreePicker.js引入后下面就可以直接使用了,代码格式和ext combox差不多,具体代码如下(这里实现的是动态下拉树)
3、最后在后台组织json数据
其中isLeaf(menu.getMenuId())是根据获取到的数据在重新获取一遍数据,若可以查到数据,则证明该节点是非叶子节点
4、数据库中的数据格式为menuid parentId
5、树形下拉菜单默认是显示根节点的,显然,在项目中这个是不合适的,在上面的代码中添加了rootVisible:false却不起作用,无奈之下只能修改TreePicker.js的源码了。修改内容如下:
在此处代码picker = new Ext.tree.Panel({ 下添加rootVisible: false即可,这样所有的树形下拉菜单默认就不显示根节点了。
OK!至此一个完整的Ext下拉树就搞定了。看下效果图: