`
skzr.org
  • 浏览: 365527 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

ExtJS类ComboBox效果——ExtJS学习之旅

阅读更多

ExtJS高级应用:ExtJS类ComboBox效果

ExtJS学习之旅:目录   上一篇:  下一篇:

 

ComboBox的效果很不错,扩展了TriggerField打造一个可以包装任意Ext.Component对象的ComboBox效果:

测试页面

svn checkout http://cms4g.googlecode.com/svn/trunk/gae cms4g-read-only

原理:参考DateField,DateField利用了DateMenu,记得Menu原来有一个AdapterMenu,v3.2.0版本里面没有,不过可以直接使用 Menu 的items就可以了!

 

onTriggerClick : function(){
    	if (this.disabled || !this.content) return;
    	if (!this.menu) {
    		this.menu = new Ext.menu.Menu({width: this.getWidth(), plain: true, items: [this.content]});
    		this.content = this.menu.getComponent(0);
    		this.content.on('selectionchange', this.selectionchange, this);
    	}
    	this.menu.show(this.getEl(), 'tl-bl?');
    	this.content.selectCombo(this, this.value);
    }

 然后剩下的就是content需要提供即可方法:

  • selectCombo 根据字段值 标记合适的元素为选择
  • getCombo根据字段值 获取元素对象{id: '用于getValue()返回', text: '用于显示'}
  • selectionchange(contentValue) 当选择的元素发生改变时需要content触发一个事件‘selectionchange‘

通过此扩展可以做任何TriggerField的东西了^ ^

分享到:
评论
1 楼 skzr.org 2010-07-31  
今天又把它翻出来放入自己的项目中
注意到有4个新手投票?
首先感谢大家,希望投票时同时给于我建议就更好了
^ ^

相关推荐

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf

    在本文中,我们将深入探讨EXTJS如何实现ComboBox的级联效果,并理解其数据提交VALUE的工作原理。 首先,我们需要创建两个Store对象,一个用于存储“队名称”(storedm),另一个用于存储“井号”(storejh)。每个...

    extjs 自动补全 模拟combobox

    EXTJS并没有直接提供一个名为"自动补全"的组件,但它可以通过模拟Combobox组件来实现这一效果。Combobox是EXTJS中的一个下拉选择框,它可以显示一个下拉列表供用户选择,同时也可以配合自动补全功能。 首先,让我们...

    extjs editgrid combobox 回显

    在探讨“extjs editgrid combobox 回显”这一主题时,我们主要关注的是如何在ExtJS框架下,实现编辑网格(EditGrid)中的组合框(ComboBox)的值能够正确地回显到网格中。这一功能对于那些需要用户在表单中选择数据...

    extJs4 ComboBox组合框实例

    extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释

    extjs的ComboBox 2级联动

    在Web应用程序中,我们经常需要实现二级联动效果,即一个ComboBox的选择会影响另一个ComboBox的显示内容。这在数据关联和筛选场景中尤为常见,例如省份和城市的关联选择。本文将深入探讨如何在ExtJS中实现ComboBox的...

    Ext combobox 下拉多选框带搜索功能

    `MultiComboSearch_5.TXT`可能是实现这个功能的代码片段或文档,可以进一步分析和学习。 总的来说,这个定制的Ext ComboBox组件结合了多选和搜索功能,提高了用户在大量选项中的交互效率。理解并实现这样的功能对于...

    Extjs6中Combobox实现下拉多选

    该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

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

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

    extjs3.x combobox智能联想

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

    ExtJS Combobox二级联动列子

    ExtJS的Combobox组件是一种常见的数据输入控件,它提供了下拉列表的功能,用户可以选择列表中的一个选项或者在输入框中自由输入。在实际应用中,我们常常会遇到需要实现二级甚至多级联动的场景,这通常是由于数据的...

    Extjs中ComboBox加载并赋初值的实现方法

    在Extjs框架中,ComboBox组件是经常使用的组件之一,它允许用户在一个下拉列表中进行选择。当需要在ComboBox加载数据之后为其赋初值,且这个赋值操作需要在数据加载完成后才能进行,以确保用户体验的正确性时,需要...

    Extjs让combobox写起来简洁又漂亮

    Extjs是一个基于JavaScript框架的前端框架,主要用于创建丰富的交互式用户界面。其中,Extjs的combobox组件是一...通过Extjs提供的丰富组件和灵活的配置选项,可以快速实现复杂的UI效果,提升应用的交互性和视觉效果。

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

    首先,我们来看看`LovCombo.js`,这可能是一个自定义的组合框组件,扩展了ExtJS的原生ComboBox类,以实现多选功能。在ExtJS中,创建这样的组件通常涉及到以下步骤: 1. **创建一个新的类**:定义一个继承自Ext.form...

    Extjs学习笔记(-):ComboBox联动

    本篇学习笔记将深入探讨EXTJS中ComboBox的联动效果,即一个ComboBox的选择会触发另一个ComboBox的数据更新,以此来提供更丰富的交互体验。通过源码解析和工具应用,我们将了解如何构建和实现这种联动效果。 ...

    模仿extjs风格写的jquery combobox

    这个jQuery ComboBox是开发者为了在不使用ExtJS完整库的情况下,实现类似ExtJS ComboBox的交互效果和功能而创建的。 描述中的“NULL”没有提供额外的信息,但我们可以根据标题推测,这个项目可能包含了使用jQuery...

    ExtJs Google Suggest 动态查询效果

    首先,我们要理解ExtJs的核心组件之一——ComboBox(组合框)。ComboBox结合了文本输入框和下拉列表,通常用于提供预定义的选项供用户选择。在这个案例中,ComboBox被定制以实现动态查询功能,即根据用户的输入实时...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ...

    extJs ComboBox级联

    ExtJS ComboBox级联是一种在Web应用中常见的交互方式,它允许用户从下拉列表中选择一个值,并且这个选择会影响到另一个ComboBox的选择项,通常用于表示层级关系的数据,比如省份-城市-区县。这种功能在数据筛选、...

Global site tag (gtag.js) - Google Analytics