1. 爱易网页
  2. JavaSript
  3. 扩展EXTJS ComboBox为上拉选择树

扩展EXTJS ComboBox为上拉选择树

日期：2014-05-16　 浏览次数：20449 次

扩展EXTJS ComboBox为下拉选择树

在做OECP平台的登陆页面时，需要选择相应的公司进行登陆，公司的选择是树形结构的，而extjs的下拉combobox为列表结构，为了让页面操作更加简单，决定将下拉列表改造成下拉树。
在这里主要用到了Extjs的extend的语法，扩展比较简单，直接上代码吧。

js 代码
  1. Ext.ns("OECP.ui");
  2. /**
  3. * 下拉列表选择树
  4. * <br>
  5. * 依赖EXTJS3版本
  6. * @class OECP.ui.ComboBoxTree
  7. * @extends Ext.form.ComboBox
  8. * @author yongtree
  9. */
  10. OECP.ui.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
  11. /**
  12. * 回调函数,用于传递选择的id，text属性
  13. *
  14. * @type
  15. */
  16. callback : Ext.emptyFn,
  17. store : new Ext.data.SimpleStore({
  18. fields : [],
  19. data : [[]]
  20. }),
  21. editable : this.editable||false,
  22. mode : 'local',
  23. emptyText : this.emptyText||"请选择",
  24. allowBlank : this.allowBlank||true,
  25. blankText : this.blankText||"必须输入!",
  26. triggerAction : 'all',
  27. maxHeight : 200,
  28. anchor : '95%',
  29. displayField : 'text',
  30. valueField : 'id',
  31. tpl : "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",
  32. selectedClass : '',
  33. onSelect : Ext.emptyFn,
  34. /**
  35. * 根的名字
  36. *
  37. * @type String
  38. */
  39. rootText : this.rootText||'root',
  40. /**
  41. * 树的请求地址
  42. *
  43. * @t

相关资料更多>

  1. 【解惑】你知道javascript中的“===”如何用吗
  2. JSTL判断server端返回的数据聚合是否大于-0
  3. input text不得不输入大于0 的数字
  4. Cordova 3.x 源码分析 - cordova.js梗概
  5. JSP生成有彩色花纹的验证码
  6. javascript中的delete跟void运算符
  7. 讨论怎样隐藏链接地址不让客户端找到？该怎么处理
  8. 惯用js代码大全3
  9. JS操作JSON小结 (转载)