`
yongtree
  • 浏览: 233926 次
  • 性别: 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

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

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

相关推荐

    extjs4 实现下拉树并支持复选

    在EXTJS4中，实现一个下拉树（Combobox Tree）并支持多选和复选功能，主要是通过自定义组件（Ext.define）来完成的。这个组件继承自EXTJS的Picker字段（Ext.form.field.Picker），并添加了树形结构和复选功能。以下...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    在EXTJS4中，下拉菜单树（ComboBox+Tree）是一种高级UI组件，它结合了ComboBox的下拉选择框和TreePanel的树形结构，提供了一种用户友好的交互方式，用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...

    Extjs下拉多选树

    5. **数据绑定**：在创建下拉多选树时，需要为树的store绑定数据源。数据源可以是JSON对象、XML文件或者远程服务器数据，通过Ext.data.TreeStore进行管理。 6. **模板和渲染**：为了在下拉框中正确显示树节点，需要...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下，我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree，它在ExtJS4中实现了单选和多选功能，并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性，...

    Extjs自定义组件-下拉树

    Extjs自定义组件—下拉树，不仅提升了用户体验，也展现了Extjs框架的强大扩展能力。通过本文的详细介绍，开发者可以掌握其实现细节，为自己的项目增添一个实用且美观的组件。无论是初学者还是经验丰富的开发者，都...

    无废话ExtJs 教程十[下拉列表：Combobox]

    在ExtJS中，下拉列表（Combobox）是常见的组件之一，它结合了输入框和下拉菜单的功能，允许用户进行选择或自由输入。本教程将深入探讨ExtJS中的Combobox组件，包括其基本用法、配置选项、事件处理和自定义功能。 1....

    extjs下拉树

    ExtJS下拉树是一种在Web应用中常用的交互组件，它结合了下拉框和树形结构的优点，使得用户可以在一个紧凑的空间内选择嵌套层次的数据。这种组件在数据层级较多，需要用户进行逐级选择或者查看层级关系时非常实用。在...

    ExtJS3 实现异步下拉树

    7. **扩展控件**：可能需要创建一个新的组件类，继承自`Ext.form.field.ComboBox`，并覆盖或扩展其默认行为，以实现下拉树的功能。 8. **配置项**：例如，`displayField`定义显示字段，`valueField`定义值字段，`...

    ExtJS下拉列表树控件1

    标题中的“ExtJS下拉列表树控件1”指的是在ExtJS框架中使用的一种特殊的下拉选择组件，它不仅具备了传统的下拉列表功能，还集成了树形结构，允许用户在下拉菜单中选择嵌套层次的数据。这种控件在处理具有层级关系的...

    ExtJs4实现下拉树选择框ComboTree

    ### ExtJs4 实现下拉树选择框 ComboTree #### 概述 在现代Web应用开发中，ExtJS 是一个非常强大的JavaScript库，用于构建复杂的客户端应用程序。它提供了丰富的组件库，使得开发者能够轻松地创建出功能丰富且交互性...

    Extjs6 下拉列表

    在ExtJS6中，下拉列表（ComboBox）是一种常见的组件，用于提供用户可以选择的预定义选项。这个框架提供了丰富的功能和定制性，使得下拉列表不仅能够简单地显示一组静态选项，还能与数据源进行联动，展示动态加载的...

    Extjs4.X下comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用

    同时，还需要配置`mode`为`EXTJS4`特有的`EXTJS4`模式，以启用树结构的多选功能。 3. **数据源与模型** 数据源通常通过`store`属性指定，可以是本地数据或者远程加载的数据。对于树形结构，需要使用`TreeStore`，...

    Extjs实现下拉菜单效果

    下拉树结合了ExtJS的ComboBox和TreePanel的功能，它不仅可以下拉显示列表项，还能够以树形结构的方式展示层级数据，允许用户通过树形结构选择一个或多个节点。 在文章中提供了一个ExtJS下拉树组件的实现示例代码。...

    Extjs ComboBoxTree 下拉树组件

    在ExtJS中，ComboBox是常见的选择控件，用于展示可选项的下拉列表。然而，当需求不仅仅是简单的文本选择，而是需要层级结构的数据展示时，比如树形结构，这时就出现了ComboBoxTree——一个结合了下拉框和树形结构的...

    extjs3.x combobox智能联想

    在EXTJS 3.x版本中，Combobox是一个非常实用的组件，它提供了下拉列表功能，用户可以在输入框中输入文字，系统会根据输入内容自动进行模糊匹配，给出相关的建议选项。这种功能在数据筛选、搜索或者选择项较多时特别...

    Extjs4下拉多选扩展

    在ExtJS中，下拉框（ComboBox）是一种常用的UI组件，通常用于展示可选择的列表项。然而，标准的下拉框只支持单选模式，如果需要实现多选功能，就需要进行一定的扩展。本文将深入探讨如何在ExtJS 4中实现下拉多选扩展...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    在ExtJS 3.4.0版本中，多选下拉框（Multiselect Combobox）是一种常见的用户界面组件，用于提供多个选项供用户选择。这个功能增强了标准的单选下拉框，允许用户同时选择多个条目，通常通过复选框实现。在描述中提到...

    Extjs颜色选择器选择器

    在ExtJS中，ComboBox是一个可以下拉选择的输入框，支持动态加载数据和搜索过滤。如果这个文件包含了一个完整的实例，那么它可能会讲解如何配置`queryMode`（如'local'或'remote'），`displayField`和`valueField`，...

    模仿extjs风格写的jquery combobox

    标题中的“模仿extjs风格写的jquery combobox”指的是一个基于jQuery的下拉选择框组件，它的设计灵感来源于ExtJS库的ComboBox控件。ExtJS是一款功能丰富的JavaScript框架，以其强大的组件化和数据绑定机制著名，而...

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