Hello, i have a flex list that is populated by an arraycollection. in the arraycollection i have a field subTotal and i would like to calculate the subtotals from that field and pin them to a text component and i would like to do that even when the list is filtered. below is my code
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" width="100%" height="100%" verticalAlign="top" verticalGap="0" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" xmlns:ns1="ascript.*" creationComplete="init()" initialize="initDate()" xmlns:ns2="components.*"> <mx:Style source="css/styleSheet.css"/> <mx:Script> <![CDATA[ import components.newEntryForm; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.managers.CursorManager; import mx.managers.PopUpManager; import mx.rpc.events.ResultEvent; import mx.events.CollectionEvent; protected const MAX_DATE:Date=new Date(2020, 11, 31); /******************* code to Filter based on Date Range *****************************/ protected const MIN_DATE:Date=new Date(2014, 0, 1); /******************* Start Pop Ups *****************************/ private var add_win:newEntryForm; /******************* code to get Expense Details *****************************/ [Bindable] private var expenseAr:ArrayCollection; protected function arrColl_filterFunc(item:Object):Boolean { var cDate:Number=Date.parse(item.hireDate); if (!sDate || !eDate) { return true; } if (sDate.selectedDate && eDate.selectedDate) { return (sDate.selectedDate.time <= cDate) && (eDate.selectedDate.time >= cDate); } else if (sDate.selectedDate) { return sDate.selectedDate.time <= cDate; } else if (eDate.selectedDate) { return eDate.selectedDate.time >= cDate; } else { return true; } //expenseAr.addEventListener(CollectionEvent.COLLECTION_CHANGE, calculateSum); } protected function initDate():void { sDate.selectedDate=MIN_DATE; sDate.selectableRange={rangeStart: MIN_DATE, rangeEnd: MAX_DATE}; eDate.selectedDate=MAX_DATE; eDate.selectableRange=sDate.selectableRange; } private function createdaddPopup():void { add_win=newEntryForm(PopUpManager.createPopUp(this, newEntryForm, true)); } private function expenseResult(event:ResultEvent):void { expenseAr=event.result as ArrayCollection; expenseAr.filterFunction=arrColl_filterFunc; expenseAr.refresh(); } private function init():void { moRentalsSvc.getExpense(); //expenseAr.addEventListener(CollectionEvent.COLLECTION_CHANGE, calculateSum); } public function calculateSum(event:CollectionEvent):void { var amt:Number=0; var n:int=expenseAr.length; for (var i:int=0; i < n; i++) { var expenseEntry:Object=expenseAr.getItemAt(i); amt+=expenseEntry.subTotal; } sum.text=ugxftr.format(amt.toString()); } ]]> </mx:Script> <mx:RemoteObject id="moRentalsSvc" destination="ColdFusion" source="moRentals.src.CFCs.crud" showBusyCursor="true" fault="CursorManager.removeBusyCursor();Alert.show(event.fault.message)"> <mx:method name="getExpense" result="expenseResult(event)"/> </mx:RemoteObject> <mx:CurrencyFormatter id="ugxftr" precision="0" thousandsSeparatorTo="," useThousandsSeparator="true" rounding="up" currencySymbol="UGX "/> <mx:DateFormatter id="dateFormat" formatString="MMMM DD, YYYY"/> <mx:HBox styleName="header" width="100%" height="50" verticalAlign="middle" verticalGap="0"> <mx:Image source="assets/logo.png"/> <mx:Spacer width="100%"/> <mx:Label text="Logged in as: Aaliyah Ntulo"/> <mx:Image source="assets/power.png"/> </mx:HBox> <mx:HBox width="100%" height="100%" horizontalGap="0"> <mx:VBox width="200" height="100%" verticalGap="0" backgroundColor="#818284" horizontalAlign="center"> <ns2:menuButton> <mx:Image source="assets/dashboard.png"/> <mx:Label text="Dashboard"/> </ns2:menuButton> <ns2:menuButton> <mx:Image source="assets/drivers.png"/> <mx:Spacer/> <mx:Label text="Drivers"/> </ns2:menuButton> <ns2:menuButton> <mx:Image source="assets/car.png"/> <mx:Spacer/> <mx:Label text="Vehicles"/> </ns2:menuButton> </mx:VBox> <mx:VBox height="100%" backgroundColor="#FFFFFF" verticalGap="0"> <mx:HBox width="100%" paddingLeft="40" paddingRight="45" verticalAlign="middle" height="66"> <mx:Label text="Filter From:" styleName="listLabel"/> <mx:DateField id="sDate" change="expenseAr.refresh();"/> <mx:Label text="To:" styleName="listLabel"/> <mx:DateField id="eDate" change="expenseAr.refresh();"/> <mx:Spacer width="100%"/> <mx:Button label="New Entry" click="createdaddPopup()"/> </mx:HBox> <mx:HRule width="100%"/> <mx:HBox width="100%" paddingLeft="40" paddingRight="46" verticalAlign="middle" height="36"> <mx:Label text="DATE" width="120" styleName="listLabelHeading"/> <mx:Label text="MACHINE" width="90" styleName="listLabelHeading"/> <mx:Label text="OPERATOR" width="130" styleName="listLabelHeading"/> <mx:Label text="INCOME" width="90" styleName="listLabelHeading"/> <mx:Label text="EXPENDITURE" width="90" styleName="listLabelHeading"/> <mx:Label text="PROFIT" width="90" styleName="listLabelHeading"/> </mx:HBox> <mx:HRule width="100%"/> <ns1:transparentList id="expenseList" width="100%" dataProvider="{expenseAr}" itemRenderer="renderers.expenseListRenderer" selectedIndex="0" height="100%" paddingBottom="0" borderSkin="{null}"/> <mx:HBox width="100%" backgroundColor="#0F76BB" height="35" verticalAlign="middle" paddingLeft="20" paddingRight="20"> <mx:Label text="Opening Balance:"/> <mx:Label text="UGX 30,000,000"/> <mx:Spacer width="100%"/> <mx:Label text="Total for the Day"/> <mx:Label id="sum"/> </mx:HBox> </mx:VBox> <mx:VBox width="100%" height="100%" backgroundColor="#E7E7E8" verticalGap="0"> <mx:HBox width="430" verticalAlign="middle" height="73" backgroundColor="#818284" paddingLeft="24"> <mx:Label x="10" y="10" text="Details of Hired Machine"/> </mx:HBox> <mx:Spacer height="10"/> <mx:HBox width="100%" paddingLeft="24"> <mx:Image width="80" height="80" source="assets/drivers/{expenseList.selectedItem.picture}"/> <mx:VBox width="100%" height="80"> <mx:HBox width="100%"> <mx:Label text="Operator:" styleName="listLabel"/> <mx:Text text="{expenseList.selectedItem.fullname}"/> </mx:HBox> <mx:HRule width="100%"/> <mx:HBox width="100%" height="100%" verticalAlign="middle"> <mx:Image source="assets/add.png"/> <mx:Text text="Add"/> <mx:Spacer width="15"/> <mx:Image source="assets/statistics.png"/> <mx:Text text="Statistics"/> <mx:Spacer width="15"/> <mx:Image source="assets/edit1.png"/> <mx:Text text="Edit"/> </mx:HBox> <mx:HRule width="100%"/> </mx:VBox> </mx:HBox> <mx:Spacer height="15"/> <mx:VBox width="100%" paddingLeft="24"> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Date of Hire:" styleName="listLabel" width="125"/> <mx:Text text="{dateFormat.format(expenseList.selectedItem.hireDate)}"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Machine:" styleName="listLabel" width="125"/> <mx:Text text="{expenseList.selectedItem.machineNumber}"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Distance Moved:" styleName="listLabel" width="125"/> <mx:Text text="{expenseList.selectedItem.distanceMoved} Km(s)"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Meter Reading:" styleName="listLabel" width="125"/> <mx:Text text="{expenseList.selectedItem.mileage} Km(s)"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Amount Hired:" styleName="listLabel" width="125"/> <mx:Text text="{ugxftr.format(expenseList.selectedItem.revenue)}"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Expense:" styleName="listLabel" width="125"/> <mx:Text text="{ugxftr.format(expenseList.selectedItem.expense)}"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Reason for Expense:" styleName="listLabel" width="125"/> <mx:Text text="{expenseList.selectedItem.expenseReason}" width="100%"/> </mx:HBox> <mx:HBox width="100%" horizontalGap="12"> <mx:Label text="Total:" styleName="listLabel" width="125"/> <mx:Text text="{ugxftr.format(expenseList.selectedItem.subTotal)}"/> </mx:HBox> </mx:VBox> <mx:Spacer height="10"/> <mx:HBox width="430" height="35" backgroundColor="#818284" verticalAlign="middle" paddingLeft="24"> <mx:Label text="Job Description"/> </mx:HBox> <mx:Spacer height="10"/> <mx:Text text="{expenseList.selectedItem.description}" width="430" paddingLeft="24" paddingRight="24"/> </mx:VBox> </mx:HBox> </mx:Application>
