`
yongtree
  • 浏览: 230659 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

扩展EXTJS ComboBox为下拉选择树

    博客分类：
  • RIA
EXTJavaScriptUICSSjson 
阅读更多

在做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. * @type String
  44. */
  45. treeUrl : this.treeUrl,
  46. tree : null,
  47. initComponent : function() {
  49. this.tree = new Ext.tree.TreePanel({
  50. height : 200,
  51. scope : this,
  52. autoScroll : true,
  53. split : true,
  54. root : new Ext.tree.AsyncTreeNode({
  55. expanded : true,
  56. id : '_oecp',
  57. text : this.rootText
  58. }),
  60. loader : new Ext.tree.TreeLoader({
  61. url : this.treeUrl
  63. }),
  64. rootVisible : true
  65. });
  66. var c = this;
  67. /**
  68. * 点击选中节点并回调传值
  69. */
  70. this.tree.on('click', function(node) {
  71. if (node.id != null && node.id != '') {
  72. if (node.id != '_oecp') {
  73. c.setValue(node.text);
  74. c.callback.call(this, node.id, node.text);
  75. c.collapse();
  76. } else {
  77. Ext.Msg.alert("提示", "此节点无效，请重新选择!")
  78. }
  80. }
  81. })
  83. this.on('expand', function() {
  84. this.tree.render('tree');
  85. this.tree.expandAll();
  86. });
  88. OECP.ui.ComboBoxTree.superclass.initComponent.call(this);
  89. }
  91. })

在页面上如下使用：
xhtml 代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5. <title>ComboBoxTree.html</title>
  6. <link rel="stylesheet" type="text/css"
  7. href="../../extjs/resources/css/ext-all.css" />
  8. <script type="text/javascript"
  9. src="../../extjs/adapter/ext/ext-base.js"></script>
  10. <script type="text/javascript" src="../../extjs/ext-all.js"></script>
  11. <script type="text/javascript" src="../core/ComboBoxTree.js"></script>
  12. </head>
  14. <body>
  15. <div id="cbt"></div>
  16. </body>
  17. </html>
  18. <script type="text/javascript">
  19. Ext.onReady(function() {
  20. new OECP.ui.ComboBoxTree({
  21. renderTo:"cbt",
  22. treeUrl:"ComboBoxTree.json",
  23. editable:false,
  24. rootText:"选择公司",
  25. valueField:"com",
  26. displayField:"_com",
  27. callback:function(id,text){
  28. alert(id);
  29. alert(text);
  30. //可以做更多的处理。
  31. }
  32. });
  33. })
  34. </script>


附件中包含了该组件源代码和一个demo。

OECP平台正在研发之中，在第一个稳定版本发布的时候，将开放相关的API。
相关的API，可参见：http://prj.oecp.cn/projects/oecp-platform/wiki/OECPuiComboBoxTree

原文：http://www.oecp.cn/hi/yongtree/blog/2300

分享到：
| 由企业应用集成浅谈组件化模式的企业架构
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics