ComponentArt控件分析之ComboBox(2)

     
一.来看下数据数据解析

首先后台先生成一种数据格式,这种格式跟JSON差不多(不知道为什么不用JSON),查看HTML源代码

ComboBox2.Data = [[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',0],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem1']],[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',0],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem2']],[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',0],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','ComboBoxItem3']],[['Text','a'],['Value','b']],[['Text','b'],['Value','c']],[['Text','c'],['Enabled',0],['Value','b']],[['CssClass','comboItemHover'],['Text','d'],['Value','c'],['Id','hello']]];

2.需要定义一个ComboBoxItem对象(自然要定义数据集合类型了),其中js也要定义,数据结构采用HashTable,查找速度快.其中定义了一个JavaScriptArray用来转换数据

    private string BuildStorage()
    {
      JavaScriptArray arNodeList = new JavaScriptArray();

      foreach (ComboBoxItem oItem in this.Items)
      {
        ProcessItem(oItem, arNodeList);
      }
        string strList=arNodeList.ToString();
        return strList;
    }
    private void ProcessItem(ComboBoxItem oItem, ArrayList arNodeList)
    {
        

      ArrayList itemProperties = new ArrayList();
      foreach (string propertyName in oItem.Properties.Keys)
      {
        switch (propertyName.ToLower())
        {
          // bools
          case "enabled": itemProperties.Add(new object[] { "Enabled", oItem.Enabled }); break;

          // normal string handling
          default:
            itemProperties.Add(new object[] { propertyName, oItem.Properties[propertyName] });
            break;
        }
      }
      arNodeList.Add(itemProperties);
    }

3.前台处理数据

数据得到以后就要处理

前段的ComboBox(Initialize)初始化时会调用Render方法,Render方法会调用RenderDropDown方法，RenderDropDown方法调用RenderItem方法，把每项都呈现出来

二.展开下拉框

看这部分花了我一些时间.

本来的话展开下拉框和关闭下拉框只需要设置一个css样式就可以了的.事情上确实可以这么做.

ComboBox同时还提供了2个属性CollapseSlide用于设置滑动效果,CollapseDuration用于设置滑动效果的持续时间.

客户端api提供了Collapse和Expand方法,用于关闭和展开下拉框.按照我的思维就是直接设置下xx.style.display="none"了事.这样就可以用了.为了给控件加上滑动时的效果.这个两个方法基本没做什么.而是调用了相关的方法如ComponentArt_ComboBox_CollapseStep方法.

这里涉及到递归的使用.在Collapse方法中设置了一个当前时间this.CollapseStartTime=(new Date()).getTime();

然后ComponentArt_ComboBox_CollapseStep方法再获取现在时间与CollapseStartTime相比较,时间差与CollapseDuration属性相比较.当时间差达到CollapseDuration属性值时,即递归结束.

看代码

1.

    ComponentArt_ComboBox.prototype.Collapse=function (){
        if(this.Resizing){
            return ;
            
        }
        var _20=document.getElementById(this.Id+"_DropDown");
        if(_20&&_20.style.display!="none"){
            _20.style.overflow="hidden";
            this.CollapseElement=_20;
            //设置当前时间
            this.CollapseStartTime=(new Date()).getTime();
            var _21=_qFF(_20);
            //递归调用
            ComponentArt_ComboBox_CollapseStep(this,_21);
            //_20.style.display="none";
        }
        this.Expanded=false;
        
    };

2.

    window.ComponentArt_ComboBox_CollapseStep = function(_d, _e) {
        if (!_d.CollapseElement) {
            return;
        }
        var _f = (new Date()).getTime()-_d.CollapseStartTime;
        var _10 = ComponentArt_SlidePortionCompleted(_f, _d.CollapseDuration, _d.CollapseSlide);
        if (_10 == 1) {
        //alert(_d.CollapseElement.style.height);
        //_d.CollapseElement.style.height = 280+"px";
        //隐藏
            _d.CollapseElement.style.display = "none";
            _d.CollapseElement = null;
            _d.HideOverlay();
            var _11 = _d.get_events().getHandler("collapse");
            if (_11) {
                _11(_d, Sys.EventArgs.Empty);
            }
        } else {
            var _12 = Math.ceil((1-_10)*_e);
            if (_d.ExpandDirection == 1) {
                _d.CollapseElement.style.top = (_d.ExpandBaseLine-_12)+"px";
            }
            //高度的滚动在此更改
            _d.CollapseElement.style.height = _12+"px";
            //alert(_d.CollapseElement.style.height);
            //递归调用
            setTimeout("ComponentArt_ComboBox_CollapseStep("+_d.Id+","+_e+");", ComponentArt_ComboBox_SlideDelay);
        }
        //document.getElementById("aa").innerHTML+="_f---------"+_f+"_10-------"+_10+"-----------"+_d.CollapseElement.style.height+"<br>"
        //alert("_10"+_10+"<br>"+_d.CollapseElement.style.height);
    };

3.

window.cart_slidetype_none=0;
    window.cart_slidetype_exponentialaccelerate=1;
    window.cart_slidetype_exponentialdecelerate=2;
    window._q87=3;
    window.cart_slidetype_quadraticaccelerate=4;
    window.cart_slidetype_quadraticdecelerate=5;
    /**//**
     * 
     * @param {Object} 时间差
     * @param {Object} 持续时间
     * @param {Object} 效果
     */
    window.ComponentArt_SlidePortionCompleted=function (_4a,_4b,_4c){
        if(_4c==cart_slidetype_none||_4a>=_4b){
            
            return 1;
            
        }
        var _4d=(_4c==cart_slidetype_exponentialaccelerate)||(_4c==cart_slidetype_quadraticaccelerate);
        if(_4d){
            _4a=_4b-_4a;
            
        }
        //4a(时间差计算)与_4b相比较
        var _4e=_4a/_4b;
        var _4f;
        switch(_4c){
            case _q87:
            _4f=_4e;
            break;
            case cart_slidetype_exponentialdecelerate:
            case cart_slidetype_exponentialaccelerate:
            _4f=1-Math.pow(1/300,_4e);
            break;
            case cart_slidetype_quadraticdecelerate:
            case cart_slidetype_quadraticaccelerate:
            _4f=Math.pow(_4e,2);
            break;
            
        }
        if(_4d){
            _4f=1-_4f;
            
        }
        //document.getElementById("aa").innerHTML+=Math.min(Math.max(0,_4f),1)+"<br>";
        return Math.min(Math.max(0,_4f),1);
        
    };

看个截图



好了,结束