How to create customized component?

Question

I want to create a data grid that has 4 columns: description, quantity, price, and line total. The line total will simply be the product of quantity & price. I want the last line of the grid to be the total of all line totals.

How can I create this type of grid? I thought of using item renderers, but I can't figure out how to have the last row be for the line items total.

If I must create a custom component, I'd appreciate book recommendations on custom component creation. While I have a general understanding of how to create custom components, I don't have a firm a grip on it as I'd like. Thanks.

Marty Pitt Marty Pitt · Accepted Answer · 2010-11-01T17:31:10

While you should definitely check out the links provided by www.Flextras.com, there are a couple of ways to provide the functionliaty you're after:

The simplest is a labelFunction:

<DataGrid dataProvider="{dp}">
     <columns>
         <DataGridColumn labelFunction="sumTotals" />
     </columns>
 </DataGrid>

 private function sumTotals(item:Object,column:DataGridColumn):String {
     return Number(item.quantity * item.price).toString();
 }

Alternatively, you could create your own itemRenderer, as follows:

  <!-- MyItemRenderer.mxml -->
 <mx:Label>
     <mx:Script>
         override public function set data(value:Object):void {
             super.data = value;
              this.label = Number(item.quantity * item.price).toString();
         }
     </mx:Script>
 </mx:Label>


 <!-- Your component -->
 <DataGrid dataProvider="{dp}">
     <columns>
         <DataGridColumn itemRenderer="MyItemRenderer"/>
     </columns>
 </DataGrid>

How to create customized component?

2 Answers