创建博客 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

可指定选项不可选择(变灰)的ComboBox和List (Disabling ComboBox and List Selection)  

2008-09-09 16:50:53|  分类: Flex 组件 |  标签: |举报 |字号 订阅

可指定选项不可选择(变灰)的ComboBox和List (Disabling ComboBox and List Selection) - 阿蔡 - Flex 技术博客

由于项目需要,我们需要一个自定义的ComboBox,它可以让其中的一些选项根据上下文环境变灰(不可选)。由于Flex自身并不提供这样的控件,因此就开始研究啊研究。

首先google一下,发现最网络上这个方面的讨论很少,只有在Alexblog上找到了一条有关于不可选的List,而具体改list如何应用到ComboBox中去,其实并不是件容易的事情。

于是就自己动手了。具体如何实现就不详细解释,直接看代码:

在线演示Demo  源码下载(download code)

注:如果访问demo有问题,那么新开一个浏览器,输入http://williscai.blogbus.com,访问后再输入http://williscai.blogbus.com/files/12209491200.swf,即可。blogbus的放盗链真是麻烦,不能直接从这里访问。

//Demo

<?xml version="1.0"?>

<!-- DisabledComboBoxItemsTest.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cwmlib="com.cwmlib.controls.*">

<mx:Script>

<![CDATA[

      import mx.collections.ArrayCollection;

      [Bindable]

      private var dpFlat:ArrayCollection = new ArrayCollection([

            {territory:"Dana Binn", enabled:true},

            {territory:"Barbara Jennings", enabled:false},       

            {territory:"Joe Smith", enabled:false},

            {territory:"Bethany Pittman", enabled:true},

            {territory:"T.R. Smith", enabled:true},

            {territory:"Alice Treu", enabled:false},

            {territory:"Jane Grove", enabled:true}

      ]);  

     

      [Bindable]

      private var dpxml:XML =

            <regions>                                            

                  <region territory="Dana Binn" enabled="false"/>

                  <region territory="Barbara Jennings" enabled="false"/>

                  <region territory="Joe Smith" enabled="false"/>

                  <region territory="Bethany Pittman" enabled="true"/>

                  <region territory="T.R. Smith" enabled="true"/>

                  <region territory="Alice Treu" enabled="true"/>

                  <region territory="Jane Grove" enabled="true"/>

            </regions>;

 

]]>

</mx:Script>

      <mx:VBox width="100%" height="100%">

            <mx:Text text="DataProvider is ArrayCollection" fontWeight="bold"/>

            <mx:HBox width="100%">             

                  <cwmlib:DisabledList dataProvider="{dpFlat}" labelField="territory"/>

                  <cwmlib:DisabledComboBox dataProvider="{dpFlat}" labelField="territory"/>

            </mx:HBox>       

            <mx:Text text="DataProvider is XML" fontWeight="bold"/>

            <mx:HBox width="100%">

                  <cwmlib:DisabledList dataProvider="{dpxml.region}" labelField="@territory"/>

                  <cwmlib:DisabledComboBox dataProvider="{dpxml.region}" labelField="@territory"/>                

            </mx:HBox>       

      </mx:VBox>

</mx:Application>

//-------------------------------------------------------------------

//DisabledComboBox.as

package com.cwmlib.controls

{

/**

 * DisabledComboBox.as

 *

 * Copyright (c) 2008 Weimin Cai

 * All rights reserved.

 *

 * The source code is the copyrighted,

 *

 * Revision History

 *

 * June 18, 2008  Weimin Cai

 */

      import mx.controls.ComboBox;

      import mx.core.ClassFactory;

      import mx.events.FlexEvent;

     

      public class DisabledComboBox extends ComboBox

      {

          /**

           *  Constructor.

           */

     

          public function DisabledComboBox()

          {

              super();

              this.dropdownFactory = new ClassFactory(DisabledList);

              this.itemRenderer = new ClassFactory(DisabledListItemRenderer);

          }

         

          /**

           *  @private

           */

          override public function set dataProvider(value:Object):void

          {        

              super.dataProvider = value;

              moveToEnable();

          }

         

          private function moveToEnable():void {

            var i:int = -1; 

            for each (var obj:Object in dataProvider) {

                  i++;

                  if (this.selectedIndex == -1) {

                        this.selectedIndex = 0;

                  }

                  if (i < this.selectedIndex) {

                        continue;

                  }

                  if (obj != null

                        && ((obj is XML && obj.@enabled == 'false')

                              || obj.enabled==false || obj.enabled=='false')){                      

                        if(i == this.selectedIndex){

                              this.selectedIndex++;

                        }

                  }

            }

            if (this.selectedIndex > i) {

                  this.selectedIndex = 0;

            }

          }

         

          override public function initialize():void

          {

            this.toolTip = this.text;   

              if (initialized)

                  return;

              createChildren();

              super.initialize();

          }

     

         /**

           *  @private

           *  Make sure the drop-down width is the same as the rest of the ComboBox

           */

          override protected function updateDisplayList(unscaledWidth:Number,

                                                        unscaledHeight:Number):void

          {

              super.updateDisplayList(unscaledWidth, unscaledHeight);

              this.toolTip = this.text;

          }

           

          private function textInput_valueCommitHandler(event:FlexEvent):void

          {

              // update _text if textInput.text is changed programatically

              super.text = textInput.text;

              dispatchEvent(event);

          }

         

          private function textInput_enterHandler(event:FlexEvent):void

          {

              dispatchEvent(event);

              dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));

          }    

      }

}

这里要解释的就一个函数moveToEnable(),该函数无非是当selectedIndex所在的item如果是enabledfalse时,把selectedIndex自动往下移,知道碰到一个enabledtrueitem

//-------------------------------------------------------------------

//DisabledList.as

package com.cwmlib.controls

{

/**

 * DisabledListr.as

 *

 * Copyright (c) 2008 Weimin Cai

 * All rights reserved.

 *

 * The source code is the copyrighted,

 *

 * Revision History

 *

 * June 18, 2008  Weimin Cai

 */

      import flash.events.MouseEvent;

      import flash.events.KeyboardEvent;

      import mx.core.ClassFactory;

      import mx.controls.List;     

      import mx.controls.listClasses.IListItemRenderer;

      import mx.controls.listClasses.ListItemRenderer;

     

      public class DisabledList extends List

      {

            /**

           *  Constructor.

           */

          public function DisabledList()

          {

              super();

              this.itemRenderer = new ClassFactory(DisabledListItemRenderer);

          }

         

            /**

             * Prevent mouse over handler when item is disabled.

           */

          override protected function mouseOverHandler(event:MouseEvent):void

          {

           var item:IListItemRenderer = mouseEventToItemRenderer(event);

           if (itemDisable(event)) {

                        // Disable selection.

           } else {

                  super.mouseOverHandler(event);

           }

          }

         

            /**

             * Prevent mouse down handler when item is disabled.

           */        

          override protected function mouseDownHandler(event:MouseEvent):void {

           if (itemDisable(event)) {

                        // Disable click.

                        return;

           } else {

                  super.mouseDownHandler(event);

           }              

          }

         

            /**

             * Prevent mouse up handler when item is disabled.

           */        

          override protected function mouseUpHandler(event:MouseEvent):void {

           if (itemDisable(event)) {

                        // Disable click.

                        return;

           } else {

                  super.mouseUpHandler(event);

           }        

          }

         

            /**

             * Prevent mouse click handler when item is disabled.

           */        

          override protected function mouseClickHandler(event:MouseEvent):void {

           if (itemDisable(event)) {

                        // Disable click.

                        return;

           } else {

                  super.mouseClickHandler(event);

           }

          }

         

            /**

             * Prevent mouse double click handler when item is disabled.

           */        

          override protected function mouseDoubleClickHandler(event:MouseEvent):void {

           if (itemDisable(event)) {

                        // Disable double click.

                        event.preventDefault();

           } else {

                  super.mouseDoubleClickHandler(event);

           }

          }

         

          /**

             * Prevent mouse double click handler when item is disabled.

           */       

           override protected function keyDownHandler(event:KeyboardEvent):void {

           event.stopPropagation();

           // Disable key down event.        

           //super.keyDownHandler(event);

           }                

         

          private function itemDisable(event:MouseEvent):Boolean {

            var item:IListItemRenderer = mouseEventToItemRenderer(event);

           if (item != null && item.data != null

                  && ((item.data is XML && item.data.@enabled == 'false')

                              || item.data.enabled==false || item.data.enabled=='false')

                  ) {

                  return true;

           } else {

                  return false;

           }

          }    

      }

}

解释:当鼠标或者键盘移动到一个enabledfalseitem上是,屏蔽掉所有事件,让其不可选。具体要扩展或者定制,只需要修改itemDisable()这个函数的判断条件。

//-------------------------------------------------------------------

//DisabledListItemRenderer.as

package com.cwmlib.controls

{

/**

 * DisabledListItemRenderer.as

 *

 * Copyright (c) 2008 Weimin Cai

 * All rights reserved.

 *

 * The source code is the copyrighted,

 *

 * Revision History

 *

 * June 18, 2008  Weimin Cai

 */

      import mx.controls.Label;

     

      public class DisabledListItemRenderer extends Label

      {          

            private var _enabled:Boolean = true;

           

            /**

             *  Constructor.

             */

            public function DisabledListItemRenderer()

            {

                  super();

            }    

     

            /**

             *  @private

             */

            override public function set data(value:Object):void

            {

                  if (value != null && ((value is XML && value.@enabled == 'false')

                              || value.enabled==false || value.enabled=='false')){

                  this._enabled = false;

           }else{

                  this._enabled = true;

           }

                  super.data = value;

            }    

           

            override protected function updateDisplayList(unscaledWidth:Number,

                                                                          unscaledHeight:Number):void

            {

                  super.updateDisplayList(unscaledWidth, unscaledHeight);

                  if (!this._enabled) {

                        textField.setColor(getStyle("disabledColor"));

                  }else{

                        textField.setColor(getStyle("color"));

                  }

            }                                  

      }

}

 

  评论这张
 
阅读(11142)| 评论(11)
|      
推荐 转载

历史上的今天

最近读者

热度

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2014