• 【设为首页】
  • 【收藏闪客居】
当前位置:主页>Flex>文章内容
  • Flex学习几个值得研究的例程代码
  • 来源: 作者: 2007-05-25 【

1.动态创建 DataGrid 列。这个例子是根据XML中的节点值来创建DataGrid中的列,并且还包含了一些对列的属性得设置。

<?xml version="1.0" encoding="utf-8"?>
<!-- This example uses the dataProvider to build the dataGrid columns dynamically -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    creationComplete="initApp()">
<mx:Script><![CDATA[
  import mx.controls.dataGridClasses.DataGridColumn;
  import mx.controls.DataGrid;

  import mx.collections.XMLListCollection;
  import mx.controls.Alert;
 
  [Bindable]
private var _xlcCatalog:XMLListCollection;    //the dataProvider for the DG

//run by creationComplete
public function initApp():void
{
    _xlcCatalog = new XMLListCollection(xmlCatalog.product);  //wrap the XML product nodes in an XMLListCollection
    buildDG();                                                //creates the dataGrid
}//initApp

private function buildDG():void
  {
    var aColumnDef:Array = getColumnDefArray();                  //returns a noraml array of objects that specify DtaGridColumn properties
    var oColumnDef:Object;
    var dg:DataGrid = new DataGrid;                              //instantiate a new DataGrid
    var dgc:DataGridColumn;
    var aColumnsNew:Array = dg.columns
    var iTotalDGWidth:int = 0;
    for (var i:int=0;i<aColumnDef.length;i++)  {                  //loop over the column definition array
      oColumnDef = aColumnDef[i];
      dgc = new DataGridColumn();                                  //instantiate a new DataGridColumn
      dgc.dataField = oColumnDef.dataField;                        //start setting the properties from the column def array
      dgc.width = oColumnDef.width;
      iTotalDGWidth += dgc.width;                                  //add up the column widths
      dgc.editable = oColumnDef.editable;
      dgc.sortable = oColumnDef.sortable
      dgc.visible = oColumnDef.visible;
      dgc.wordWrap = oColumnDef.wordWrap;
      aColumnsNew.push(dgc)                                        //push the new dataGridColumn onto the array
    }
   
    dg.columns = aColumnsNew;                                      //assign the array back to the dtaGrid
    dg.editable = true;
    dg.width = iTotalDGWidth;
    dg.dataProvider = _xlcCatalog;                                 //set the dataProvider 
    this.addChild(dg);                                             //add the dataGrid to the application
  }//buildDG

//uses the first product node to define the columns
private function getColumnDefArray():Array
{
    //Alert.show("colcount:" + xmlCatalog.toXMLString());
    var aColumns:Array = new Array();
    var node0:XML = xmlCatalog.product[0];                          //get the first "product" node
    var xlColumns:XMLList = node0.children();                        //get its child nodes (columns) as an XMLList
    var xmlColumn:XML
    var oColumnDef:Object;
    for (var i:int=0;i<xlColumns.length();i++)  {                    //loop over the xmlList
      xmlColumn = xlColumns[i];
      oColumnDef = new Object();
      oColumnDef.dataField = xmlColumn.localName();                  //make the dataField be the node name
      switch (oColumnDef.dataField)  {                              //conditional column property logic
        case "name":
          oColumnDef.width = 80;
          oColumnDef.sortable = false;
          oColumnDef.visible = true;
          oColumnDef.editable = false;
          oColumnDef.wordWrap = false;        
          break;
        case "description":
          oColumnDef.width = 200;
          oColumnDef.sortable = false;
          oColumnDef.visible = true;
          oColumnDef.editable = false;
          oColumnDef.wordWrap = true;        
          break;
        case "price":
          oColumnDef.width = 40;
          oColumnDef.sortable = true;
          oColumnDef.visible = true;
          oColumnDef.editable = true;
          oColumnDef.wordWrap = false;         
          break;
        case "image":
          oColumnDef.width = 100;
          oColumnDef.sortable = false;
          oColumnDef.visible = false;
          oColumnDef.editable = false;
          oColumnDef.wordWrap = false;        
          break;
        default:
          oColumnDef.width = 50;
          oColumnDef.sortable = true;
          oColumnDef.visible = true;
          oColumnDef.editable = false;
          oColumnDef.wordWrap = false;         
          break;                           
      }
      aColumns.push(oColumnDef);
    }
    return aColumns;                                                    //return the array
}//getColumnDefArray
]]></mx:Script>

  <mx:XML id="xmlCatalog">
    <catalog>
      <product productId="1">
        <name>Nokia 6010</name>
        <description>Easy to use without sacrificing style, the Nokia 6010 phone offers functional voice communication supported by text messaging, multimedia messaging, mobile internet, games and more</description>
        <price>99.99</price>
        <image>assets/pic/Nokia_6010.gif</image>
        <series>6000</series>
        <triband>false</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>MMS</highlight1>
      <highlight2>Large color display</highlight2>
      </product>
      <product productId="2">
        <name>Nokia 3100 Blue</name>
        <description>Light up the night with a glow-in-the-dark cover - when it's charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-on™ gaming cover*, you'll get luminescent light effects in time to the gaming action.</description>
        <price>139</price>
        <image>assets/pic/Nokia_3100_blue.gif</image>
        <series>3000</series>
        <triband>true</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>Glow-in-the-dark</highlight1>
      <highlight2>Flashing lights</highlight2>
      </product>
      <product productId="3">
        <name>Nokia 3100 Pink</name>
        <description>Light up the night with a glow-in-the-dark cover - when it's charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-on™ gaming cover*, you'll get luminescent light effects in time to the gaming action.</description>
        <price>139</price>
        <image>assets/pic/Nokia_3100_pink.gif</image>
        <series>3000</series>
        <triband>true</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>Glow-in-the-dark</highlight1>
      <highlight2>Flashing lights</highlight2>
      </product>
      <product productId="4">
        <name>Nokia 3120</name>
        <description>Designed for both business and pleasure, the elegant Nokia 3120 phone offers a pleasing mix of features. Enclosed within its chic, compact body, you will discover the benefits of tri-band compatibility, a color screen, MMS, XHTML browsing, cheerful screensavers, and much more.</description>
        <price>159.99</price>
        <image>assets/pic/Nokia_3120.gif</image>
        <series>3000</series>
        <triband>true</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>Multimedia messaging</highlight1>
      <highlight2>Animated screensavers</highlight2>
      </product>
      <product productId="5">
        <name>Nokia 3220</name>
        <description>The Nokia 3220 phone is a fresh new cut on some familiar ideas - animate your MMS messages with cute characters, see the music with lights that flash in time with your ringing tone, download wallpapers and screensavers with matching color schemes for the interface.</description>
        <price>159.99</price>
        <image>assets/pic/Nokia_3220.gif</image>
        <series>3000</series>
        <triband>false</triband>
        <camera>true</camera>
        <video>false</video>
        <highlight1>MIDI tones</highlight1>
      <highlight2>Cut-out covers</highlight2>
      </product>
    </catalog>
  </mx:XML>
</mx:Application>





上一页12 下一页

上一篇:如何使用Flex撷取影像   下一篇:FLEX 2.01 全套下载!
  • 用户名:新注册) 密码: 匿名评论
  • 评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规)
FLASH源文件

Copyright © 2006-2008 flashas.net All Rights Reserved.
网站内容咨询: admin#flashas.net (#为@) 联系QQ:40777822 浙ICP备06033001号
(本网站最佳浏览解析度为1024*768, 建议使用IE 6.0或以上版本浏览器。)