日期:2014-05-16  浏览次数:20431 次

根据后台json生成左侧导航菜单
文章内不再提供示例,需要查看者请从SVN下载,地址:
http://exttools.googlecode.com/svn/trunk/
效果图:


Js代码
  1. /**?
  2. ?*?扩展了Panel类,其布局设为accordion,所在区域为west;该组件初始化后会根据配置的url和root向后台发?
  3. ?*?起请求并解析返回的json串,根据parentcode为空的结点生成TreePanel,子节点通过parentcode属性添加为?
  4. ?*?对应结点的子节点,注意此处每个节点的code必须小于父节点并接大于下方的其它结点;?
  5. ?*??
  6. ?*?1.1更新:?
  7. ?*?1.不再需要leaf属性,程序内部判断;?
  8. ?*?2.store用完后即销毁,不再可用;?
  9. ?*?3.修改了结点点击的触发事件,仅注册一次以减少内存占用,该方法传递给监听函数一个Ext.tree.TreeNode对象,?
  10. ?*?可通过node.attributes属性获取结点属性;?
  11. ?*?4.添加了一个findNodeById方法,该方法通过id字符串返回对应Ext.tree.TreeNode对象;?
  12. ?*??
  13. ?*?@author?chemzqm@gmail.com?
  14. ?*?@version?1.1?
  15. ?*?@since?2010-5-9?
  16. ?*?
  17. ?*/??
  18. Ext.namespace("QM.ui");??
  19. ??
  20. QM.ui.AccordinTreePanel?=?Ext.extend(Ext.Panel,?{??
  21. ????/**?
  22. ?????*?@cfg(url)?发送请求的地址?
  23. ?????*/??
  24. ????/**?
  25. ?????*?@cfg(root)?json数组的根字符串?
  26. ?????*/??
  27. ????margins:?'5?0?5?5',??
  28. ????split:?true,??
  29. ????width:?210,??
  30. ????initComponent:?function(){??
  31. ????????Ext.apply(this,?{??
  32. ????????????layout:?'accordion',??
  33. ????????????region:?'west'??
  34. ????????})??
  35. ????????QM.ui.AccordinTreePanel.superclass.initComponent.call(this);??
  36. ????????this.addEvents(????????/**?
  37. ?????????*?@event?itemclick??树结点被点击时触发??参数:node?当前结点对象,record?当前结点对应record对象?
  38. ?????????*/??
  39. ????????'click',????????/**?
  40. ?????????*?@event?afterload?菜单项加载完毕后触发?
  41. ?????????*/??
  42. ????????'afterload');??
  43. ????????if?(!this.store)?{??
  44. ????????????this.store?=?new