zoukankan      html  css  js  c++  java
  • flex中ComboBox对应的几种数据绑定

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
     <mx:Script>
      <![CDATA[
       import mx.collections.XMLListCollection;
       import mx.collections.ArrayCollection;
       /*
        *这个例子重点演示了常见的到ComboBox的几种绑定,分别是基于数组、基于XML的数据、基于mx:Model的绑定
        对于XMl的情况,通常我们要定位到children()对应的XMLList来绑定
        */
       [Bindable]
       private var listdata:ArrayCollection;
       [Bindable]
       private var xmldata:XMLListCollection;
       [Bindable]
       private var xmlnode:XMLListCollection;
       [Bindable]
       private var xmllist:XMLList;

       private function init():void
       {
        //基于数组定义的绑定
        var list:Array=[{label: '中国', value: 'CN'}, {label: '美国', value: 'usa'}, {label: '英国', value: 'uk'}];
           //基于xml属性定义的绑定
        this.listdata=new ArrayCollection(list);
        var xml:XML=<root>
         <item label="datagrid" value="1"/>
         <item label="combobox" value="2"/>
         <item label="List" value="3"/>
        </root>;
        //构造一个xml节点定义XMLListCollection
        xmldata=new XMLListCollection(new XMLList([xml]));
        var xml1:XML=<root>
         <item>
          <label>java</label>
          <value>a</value>
         </item>
         <item>
          <label>c#</label>
          <value>b</value>
         </item>
         <item>
          <label>delphi</label>
          <value>c</value>
         </item>
        </root>;
        xmlnode=new XMLListCollection(new XMLList([xml1]));
        //直接构造一个XMLList对象
        xmllist=new XMLList();
        xmllist+=<item><label>白色</label><value>white</value></item>;
        xmllist+=<item><label>黑色</label><value>black</value></item>
       }

       private function binddata():void
       {
        if(cbBindType.selectedItem.value=="xml1"){
         cbList.dataProvider=xmldata.children();
         cbList.labelField="@label";
         DataGridColumn(grid1.columns[0]).dataField="@label";
         DataGridColumn(grid1.columns[1]).dataField="@value";
        }
        else if(cbBindType.selectedItem.value=="xml2"){
         cbList.dataProvider=xmlnode.children();
         cbList.labelField="label";
         DataGridColumn(grid1.columns[0]).dataField="label";
         DataGridColumn(grid1.columns[1]).dataField="value";
        }
        else if(cbBindType.selectedItem.value=="xml3"){
         cbList.dataProvider=xmllist;
         cbList.labelField="label";
         DataGridColumn(grid1.columns[0]).dataField="label";
         DataGridColumn(grid1.columns[1]).dataField="value";
        }
        else{
         cbList.dataProvider=listdata;
         cbList.labelField="label";
         DataGridColumn(grid1.columns[0]).dataField="label";
         DataGridColumn(grid1.columns[1]).dataField="value";
        }
        grid1.dataProvider=cbList.dataProvider;
        cbValueChanged();
       }
       
       private function cbValueChanged():void{
        var item:Object=cbList.selectedItem;
        if(item is XML){
         if(cbBindType.selectedItem.value=="xml1")
          tiPrompt.text=XML(item).@value;
         else
          tiPrompt.text=XML(item).value;
        }
        else{
         tiPrompt.text=item.value;
        }
       }
       
      ]]>
     </mx:Script>
     <mx:Model id="mType">
      <root>
       <item label="Xml属性绑定" value="xml1"/>
       <item label="Xml节点绑定" value="xml2"/>
       <item label="XmlList绑定" value="xml3"/>
       <item label="Array绑定" value="array"/>
      </root>
     </mx:Model>
     <mx:ComboBox x="52" y="20" id="cbBindType" dataProvider="{mType.item}" labelField="label" width="152">
     </mx:ComboBox>
     <mx:ComboBox x="52" y="70" id="cbList" width="152" change="cbValueChanged()">
     </mx:ComboBox>
     <mx:Label x="9" y="22" text="绑定类型"/>
     <mx:Button x="236" y="20" label="绑定" click="binddata()"/>
     <mx:TextInput x="52" y="100" id="tiPrompt" />
        <mx:DataGrid id="grid1" height="107" x="236" y="69" width="240">
            <mx:columns>
                <mx:DataGridColumn headerText="label" dataField="label"/>
                <mx:DataGridColumn headerText="value" dataField="value"/>
            </mx:columns>
        </mx:DataGrid>

    </mx:Application>

  • 相关阅读:
    ES6标准入门 第一章:简介
    vue调试工具之 vue-devtools的安装
    vue 高德地图之玩转周边
    vue-动手做个选择城市
    js 高级算法
    (转)预处器的对比——Sass、LESS和Stylus
    windows下安装mongodb以及node.js连接mongodb
    vue组件(将页面公用的头部组件化)
    浅谈移动端rem的用法
    vue 调用高德地图
  • 原文地址:https://www.cnblogs.com/midea0978/p/1681811.html
Copyright © 2011-2022 走看看