Flex使用DataGrid与项目呈现器

  前言：
  虽然DataGrid确实提供了大量方式与用用程序进行数据交互，但是它会带来另外的开销，比如在性能方面或者文件尺寸方面。在使用DataGrid以前，先考虑你希望用户如何使用数据或控件才是明智的。

dataGridColumn能够解析“属性.属性”格式的引用。

1、为DataGrid添加内联的编辑控件
   只需将editable属性设为true即可实现，默认的编辑控件是文本域。通过itemEditor和editorDataField属性，能够指定编辑数据时所使用的编辑器。itemEditor指定控件，editorDataField指定了当单元格更改时需要对编辑控件上的哪一属性进行赋值，它也指定了编辑完成后需要将控件上的哪一个属性填充到单元格上。
   下面是可以指定的内置控件：

    Button
   CheckBox
   ComboBox
   DateField
   Image
   Label
   NumbericStepper
   Text
   TextArea
   TextInput
  当然也可以根据需求指定自定义控件，只要该控件在类定义中实现了IDropInListItemRender接口即可。

2、 创建MXML的项目呈现器以显示商品
   当使用项目呈现器（itemRender)时，其中存在一个隐式的共有变量，名为data,它代表该行本身的数据。
   <mx:DataGridColumn dataField="xxx" headerText="yyy"
    itemRenderer="xxxxxxx" editable="false"/>
  关于dataGrid的属性variableRowHeight属性设为true表示Flex会为适应缩略图而 调整行高。

3、 创建内联的MXML项目呈现器
  对编译器来说，建立内联的项目呈现器与建立外部文件中的项目呈现器是一样的（实际上编辑器内部将内联项目呈现器中的代码视为单独文件进行编译）
  内联呈现器可以通过outerDocument变量与内联的单元格呈现器的意外部分进行通信。注意，尽管如此，你想引用的包含页中的函数和含量都必须生命为公有的，因为这些函数和变量的访问实际上需要跨越两个组件。

   <mx:itemRender>
     <mx:Component>
       <mx:VBox>
        <mx:Button>
        </mx:Button>
       </mx:VBox>
     </mx:Component>
  </mx:itemRenderer>
  创建内联项目呈现器时,需要使用VBox以便能在不考虑单元格大小的情况下居中放置按钮。

4、 使用set/get函数更新数据
    As允许声明一些后台函数，每当尝试访问某个类的某一属性时，这些函数就会被执行，它们就是所谓的set/get函数。

5、 使用AdvancedDataGrid
    AdvancedDataGrid是数据可视化包的一部分，它扩展了DataGrid的功能。AdvancedDataGrid提供了另外一些特性，并且在数据显示、数据聚合和数据格式化方面有有着更强大的控制力。
    

5.1、 为AdvancedDataGrid排序
       使用AdvancedDataGrid时，可以根据多个列进行排序。若改变AdvancedDataGrid的sortExpertMode属性值，则排序行为会有所改变。当设置该属性为false时，单击某列的标题区域，AdvancedDataGrid就会最先使用该列进行排序。


5.2、 设置AdvancedDataGrid的样式
       a）设置列风格
       注意：样式函数的签名必须接受两个参数，第一个是Ojbect，第二个是AdvancedDataGrid-Column。第一个参数代表AdvancedDataGrid中某列的数据，第二个则包括了styleFunction属性对应列的信息。
       public funtion myStyleFunc(data:Object,col:AdvancedDataGridColumn):Object{
       return {color:0XFF0000, fontWeight:"bold"};
    }
   在显示类别信息的<mx:AdvancedDataGrid>标签中添加styleFunction属性令其引用刚才编写的myStyleFunc。


     b)设置行风格
    <mx:AdvancedDataGrid dataProvider="{dp}"
    height="xxx"  styleFunction="myStyleFunc">
       <mx:columns>
          <mx:AdvancedDataGrid dataField="zzz"/>
          ...  ...
       </mx:columns>
   </mx:AdvancedDataGrid>
 
  这样子会使得每一行都调用样式函数，因此，要向该函数添加逻辑代码使样式不被应用到所有行上。
   public function myStyleFunc(data:Object, col:AdvancedDataGrid){
       if(){} else{}
}


    c)设置单元格样式
   <mx:AdvancedDataGridColumn dataField="cost" styleFunction="xxx"/>


6、 对数据进行分组
    TreeDataGrid特性， 两种方式： 标签和as
   <mx:dataProvider>
     <mx:GroupingCollection id="myGroup" source="{dp}">
       <mx:Grouping>
         <mx:GroupingField name="cat"/>
       </mx:Grouping>
     </mx:GroupingCollection>
    </mx:dataProvider>

  <mx:AdvancedDataGrid creationComplete="myGroup.refresh()"/>

   as分组方式步骤：
   a)创建一个GroupCollection对象
   b)将AdvancedDataGrid的dataProvider赋值给GroupCollection对象的source属性
   c)新创建一个Grouping对象
   d)新创建一个GroupingField对象指定要分组的字段
   e)将GroupingField对象的数组赋值给Group对象的fields属性
   f）将Grouping对象赋值给GroupingCollection对象的grouping属性
   g)数显GroupingCollection
   h)将GroupingCollection赋值给AdvancedDataGrid的dataProvider

   private function initDG():void{
      var myGroupColl:GroupingCollection = new GroupingCollection();
      myGroupColl.source = myADG.dataProvider;
      var group:Grouping = new Grouping();
      var gf:GroupingField = new GroupingField("cat");
      group.fields = [gf];
      myGroupColl.grouping = group;
      myGroupColl.refresh();
      myADG.dataProvider = myGroupColl;
   }
   最后在AdvancedDataGrid标签通过creationComplete事件调用。
  
      
7、 显示摘要数据
    同样有两种途径：标签与as
   只有用GroupingCollection类描述的数据才能显示摘要数据。
    <mx:GroupingField name="cat">
     <mx:summaries>
        <mx:SUmmaryRow summaryPlacement="last">
        <mx:fields>
           <mx:SummaryField dataField="qty"
              operation="SUM" label="summary"/>
        </mx:fields>
         </mx:SummaryRow>
     </mx:summaries>
   </mx:GroupngField>

   summaryPlacement属性指定了摘要行在AdavancedDataGrid控件中的为之。属性可能取值有first, last, group（当前行）

    operation方式有SUM, MIN, MAX, AVG，COUNT
    如果以上方式不能执行你所需的计算，可以使用summaryFunction指定一个函数来计算自定义的数据摘要。

    ——————使用rendererProvider改变显示效果
    在AdvancedDataGrid标签块中的任何位置键入如下式样代码：
    <mx:rendererProviders>
     <mx:AdvancedDataGridRendererProvider
      dataField="summary"  columnIndex="1"
      columnSpan="2" renderer="自定义组件"/>
    </mx:rendererProviders>
  
   

   ————————使用as方式显示摘要数据
   private function initDG():void{
      var myGroupColl:GroupingCollection = new GroupingCollection();
      myGroupColl.source = myADG.dataProvider;
      var group:Grouping = new Grouping();
      var gf:GroupingField = new GroupingField("cat");
      group.fields = [gf];
      myGroupColl.grouping = group;

     //实现摘要部分代码
      var sr:SummaryRow = new SummaryRow();
      var sf:SummaryField = new SummaryField();
      sf.dataField = "qty";
      sf.operation = "SUM";
      sf.label = "summary";
      sr.fields = [sf];
      sr.summaryPlacement = "last";
      gf.summaries = [sr];
 
      myGroupColl.refresh();
      myADG.dataProvider = myGroupColl;
   }

评论

1 楼 dingherry 2010-11-24  

如何使<mx:GroupingField name="xxxx"/>前面有CheckBox？