`

flex中扩展combobox功能

    博客分类:
  • FLEX
阅读更多
近段时间在忙flex的东西,边学习边使用。里边有个ComboBox,类似html中的select,由于业务的需求在ComboBox的基础上,增加了模糊查询的功能,便于以最快的方式找到需要选中的项,跟大家分享一下,源代码如下:

package mycomponent
{
import mx.controls.ComboBox;
import flash.events.Event;
import flash.events.TextEvent;
import mx.controls.TextInput;
import mx.controls.ComboBase;
import mx.core.IDataRenderer;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.mx_internal;
import mx.collections.ArrayCollection;

use namespace mx_internal;
/**
  * 该类实现下拉列表的模糊匹配
  */
public class AutoCompleteComboBox extends ComboBox implements IDataRenderer, IDropInListItemRenderer,
                      IListItemRenderer
{
  /**
   * 格式:node节点中至少含有name属性
   *    <nodes>
   *        <node name="" ..../>
   *    </nodes>
   */
 
  public var nodesXmlStr:String = "";
  private var filterNodesXmlObj:XML = <nodes></nodes>; 
  private var selectedFlag:Boolean = true;
  public function AutoCompleteComboBox():void{
   super();
   init();  
  }
  private function init():void{
   this.createChildren();
  
  }
  override protected function textInput_changeHandler(event:Event):void{
   super.textInput_changeHandler(event);
   //trace("###");   
   searchMatchest();
  }
  override public function set selectedIndex(value:int):void{
      if(selectedFlag){
          super.selectedIndex = value;
       }
            selectionChanged = false;
         invalidateDisplayList();
         //trace(selectedIndex);
     }
     override public function set dataProvider(value:Object):void{
      if(selectedFlag){
          selectionChanged = true;
      }
      else{
       selectionChanged = false;
      }
   //trace("######"+XMLList(value).toXMLString());
   super.dataProvider =  new ArrayCollection();
         super.dataProvider = value;

     }
    
  private function searchMatchest():void{
   //trace(nodesXmlStr);
   if(nodesXmlStr!=""){
    selectedFlag = false;
    var inputValue:String = textInput.text;  
    var xmlList:XMLList = XMLList(XML(nodesXmlStr).node);
    var nodeNum:uint = xmlList.length();
    //trace(nodeNum);
    //trace("inputValue="+inputValue);
    if(inputValue==""){
     this.dataProvider = XML(nodesXmlStr).node;
     //trace("all="+nodesXmlStr);
    }
    else{
     filterNodesXmlObj = <nodes></nodes>;
     for(var nodeIndex:uint = 0 ; nodeIndex < nodeNum ; nodeIndex++){
      var xmlObj:XML = XML(xmlList[nodeIndex]);
      //trace(String(xmlObj.attribute("name")).indexOf(inputValue));
      //trace(String(xmlObj.attribute("name")));
      if(String(xmlObj.attribute("name")).indexOf(inputValue)>-1){
       //trace(String(xmlObj.attribute("name")).indexOf(inputValue));
       //trace(String(xmlObj.attribute("name")));
       filterNodesXmlObj.appendChild(xmlObj);   
      }
     }
     this.dataProvider = filterNodesXmlObj.node;
    }
    dropdown.selectedIndex = -1;
    dropdown.verticalScrollPosition = 0 ;
    open();
    selectedFlag = true;
   }
  }
  private function get nodesStr():String{
   return this.nodesXmlStr;
  }
  private function set nodesStr(str:String):void{
   this.nodesXmlStr = str;
  }
}
}

使用方式,在mxml文件的标签里边直接用<mycomponent:AutoCompleteComboBox   nodesXmlStr=""/>即可

注意:nodesXmlStr这个属性一定要设置,设置为AutoComplete的数据源的xml字符串,xml格式在类中已有说明
转自:http://blog.csdn.net/liyong1115/archive/2009/11/07/4782760.aspx
分享到:
评论

相关推荐

    flex ComboBox checkbox

    这个“flex ComboBox checkbox”的主题涉及到在ComboBox中集成复选框(checkbox)的功能,这使得用户可以选择多个选项,而不仅仅是单选。下面我们将详细探讨这个主题,包括ComboBox的基本概念、如何添加复选框以及...

    flex datagrid 中实现combobox联动

    4. 为了使联动更加灵活,可以创建一个自定义的ComboBox类,扩展mx.controls.ComboBox,增加一些额外的功能,比如设置联动的目标ComboBox,或者提供更方便的设置过滤条件的方法。 5. 在DataGrid的列定义中,使用...

    flex combobox 输入过滤实例

    压缩包中的`FilterComboBox`可能是一个自定义的Combobox组件,扩展了Flex的原始Combobox,集成了输入过滤功能。你可以直接使用这个组件,避免重复编写过滤逻辑。 通过以上内容,我们理解了如何在Flex 4环境中实现...

    Flex 下拉框为Tree的ComboBox

    在ComboBox中,我们需要确保当用户选择一个Tree节点时,ComboBox的selectedItem或selectedLabel能正确更新,同时Tree的选中状态也应同步到ComboBox的文本框。 在博客文章《Flex下拉框为Tree的ComboBox》中,作者cym...

    Flex实现自动过滤ComboBox

    博客中提到的`FilterComboBox.as`文件很可能是自定义的ComboBox类,它扩展了原始的ComboBox类并添加了过滤功能。下面是一个简化的示例代码,展示了如何实现自动过滤: ```actionscript import mx.controls.ComboBox...

    flex checkboxtree复选树形下拉框

    在Flex中,`mx.controls.Tree`控件可以用来展示层级数据,而通过扩展和定制,我们可以添加复选框功能,使其成为复选树形结构。每个树节点都可以包含一个复选框,用户可以通过点击复选框来选择或取消选择节点。同时,...

    Flex4视频教程_03-06ComboBox和DataGrid的使用.rar )

    ComboBox组件是Flex中的一个下拉列表选择控件,它结合了输入框和下拉列表的功能。用户可以手动输入文本,也可以从预定义的选项列表中选择。在Flex4中,ComboBox组件提供了丰富的定制选项,包括但不限于以下几点: 1...

    自定义ComboBox

    在Flex4框架中,自带的ComboBox组件虽然功能强大,但在处理中文输入时可能存在字体显示不理想或者输入法窗口位置与ComboBox不协调的情况,这可能降低用户体验。 “KYComboBox.as”很可能包含了自定义ComboBox的主要...

    flex 自定义 datagrid 列头带组合框进行过滤

    这个主题——"flex 自定义 datagrid 列头带组合框进行过滤",涉及到的关键知识点包括Flex组件定制、DataGrid列头的扩展以及ComboBox控件的使用。 1. Flex组件定制: 在Flex中,我们可以使用MXML和ActionScript来...

    Flex combox

    在Flex中,Combox组件是一种常用的控件,它结合了输入框和下拉列表的功能,提供了丰富的用户体验。在本场景中,我们讨论的是一个特殊的Combox实现,即"带复选框的树状下拉框"。 这个Flex Combox的特点在于,其下拉...

    FlexBuilder+3+中文教程

    本教程将全面介绍FlexBuilder 3的使用方法和在实际开发中的应用,尤其注重实践操作,帮助开发者掌握其核心功能和常见控件的运用。 一、FlexBuilder 3简介 FlexBuilder 3是基于Eclipse平台构建的,提供了代码编辑、...

    ComboBox in DataGrid tutorial

    - **ComboBoxItem**:表示ComboBox中的一项的类。我们使用此类以便更容易地动态创建项,可能是从XML或数据库数据中创建。 - **ComboBoxRenderer**:定义我们的ComboBox如何操作以及当选择一项时会发生什么的类。我们...

    flex combobx中使用tree

    这时,我们可以使用一个特殊的实现,即在ComboBox中嵌入Tree组件,这正是“flex combobx中使用tree”这个话题的核心。 Flex中的Tree组件用于显示多级、分层的数据,通常用于展现目录结构、组织架构等。而将Tree与...

    flex DateField 时分秒 选择

    因此,“flex DateField 时分秒选择”是一种扩展功能,使得DateField不仅能够处理日期,还能处理精确到秒的时间选择。 这个功能的实现通常涉及对原始Flex DateField的自定义和扩展。开发者可能需要创建一个自定义...

    flex中的datagrid的分页定位以及高亮显示

    在Flex开发中,`Datagrid`组件是一种常用的展示数据列表的控件,而分页和数据高亮显示是提升用户体验的重要功能。本篇主要探讨如何在Flex的`Datagrid`中实现分页定位和高亮显示。 首先,分页定位涉及的主要任务是...

    Flex 通过年月控制日历

    在Flex中,我们可以创建自定义组件来实现这一功能。一个基本的年月控件通常由两个下拉列表组成,一个用于选择年份,另一个用于选择月份。这两个控件可以使用MX或Spark的ComboBox组件来实现。用户可以通过编程方式...

    Flex4 DataGrid控件行编辑项目

    在Flex4.6开发环境中,...总的来说,这个Flex4.6的DataGrid行编辑项目展示了如何通过定制和扩展DataGrid组件,提高用户界面的交互性和功能性。开发者可以在此基础上进一步定制,以适应不同的业务需求和用户体验。

    flexdatagrid实现列中下拉列表与行勾选功能

    本篇文章将深入探讨如何在`Flex DataGrid`中实现列中下拉列表(ComboBox)以及行的勾选(CheckBox)功能,这在诸如数据筛选、多选操作等场景中非常常见。 首先,我们要了解`Flex DataGrid`的基本结构。`DataGrid`由...

    Flex 3 CookBook 简体中文

    2. **组件使用**:书中详细介绍了Flex组件库中的各个组件,如Button、ComboBox、List、TabNavigator等,以及如何自定义和扩展这些组件以满足特定需求。 3. **数据绑定**:Flex 3的数据绑定机制使得UI元素和数据模型...

Global site tag (gtag.js) - Google Analytics