'Print DataGrid In Flex'에 해당되는 글 1건

  1. 2013.07.05 Print DataGrid In Flex
반응형

Print DataGrid In Flex


PrintDataGridExample.mxml

<?xml version="1.0"?>
<!-- Main application to print a DataGrid control on multiple pages. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initData();">
<mx:Script>
<![CDATA[
import mx.printing.*;
import mx.collections.ArrayCollection;
import FormPrintView;

// Declare variables and initialize simple variables.
[Bindable]
public var dgProvider:ArrayCollection;
public var footerHeight:Number=20;
public var prodIndex:Number;
public var prodTotal:Number=0;

// Data initialization.
public function initData():void
{
// Create the data provider for the DataGrid control.
dgProvider=new ArrayCollection;
}

// Fill the dgProvider ArrayCollection with the specified items.
public function setdgProvider(items:int):void
{

prodIndex=1;
dgProvider.removeAll();
for (var z:int=0; z < items; z++)
{
var prod1:Object={};
prod1.Qty=prodIndex * 7;
prod1.Index=prodIndex++;
prodTotal+=prod1.Qty;
dgProvider.addItem(prod1);
}
}

// The function to print the output.
public function doPrint():void
{

var printJob:FlexPrintJob=new FlexPrintJob();
if (printJob.start())
{
// Create a FormPrintView control as a child of the current view.
var thePrintView:FormPrintView=new FormPrintView();
Application.application.addChild(thePrintView);

//Set the print view properties.
thePrintView.width=printJob.pageWidth;
thePrintView.height=printJob.pageHeight;
thePrintView.prodTotal=prodTotal;
// Set the data provider of the FormPrintView component's data grid
// to be the data provider of the displayed data grid.
thePrintView.myDataGrid.dataProvider=myDataGrid.dataProvider;
// Create a single-page image.
thePrintView.showPage("single");
// If the print image's data grid can hold all the provider's rows,
// add the page to the print job.
if (!thePrintView.myDataGrid.validNextPage)
{
printJob.addObject(thePrintView);
}
// Otherwise, the job requires multiple pages.
else
{
// Create the first page and add it to the print job.
thePrintView.showPage("first");
printJob.addObject(thePrintView);
thePrintView.pageNumber++;
// Loop through the following code until all pages are queued.
while (true)
{
// Move the next page of data to the top of the print grid.
thePrintView.myDataGrid.nextPage();
thePrintView.showPage("last");
// If the page holds the remaining data, or if the last page
// was completely filled by the last grid data, queue it for printing.
// Test if there is data for another PrintDataGrid page.
if (!thePrintView.myDataGrid.validNextPage)
{
// This is the last page; queue it and exit the print loop.
printJob.addObject(thePrintView);
break;
}
else
// This is not the last page. Queue a middle page.
{
thePrintView.showPage("middle");
printJob.addObject(thePrintView);
thePrintView.pageNumber++;
}
}
}
// All pages are queued; remove the FormPrintView control to free memory.
Application.application.removeChild(thePrintView);
}
// Send the job to the printer.
printJob.send();
}
]]>
</mx:Script>

<mx:Panel title="DataGrid Printing Example" height="75%" width="75%" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

<mx:DataGrid id="myDataGrid" dataProvider="{dgProvider}">
<mx:columns>
<mx:DataGridColumn dataField="Index"/>
<mx:DataGridColumn dataField="Qty"/>
</mx:columns>
</mx:DataGrid>

<mx:Text width="100%" color="blue" text="Specify the number of lines and click Fill Grid first. Then you can click Print."/>

<mx:TextInput id="dataItems" text="35"/>

<mx:HBox>
<mx:Button id="setDP" label="Fill Grid" click="setdgProvider(int(dataItems.text));"/>
<mx:Button id="printDG" label="Print" click="doPrint();"/>
</mx:HBox>
</mx:Panel>
</mx:Application>


FormPrintView.mxml

<?xml version="1.0"?>
<!-- Custom control to print the DataGrid control on multiple pages. -->

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" backgroundColor="#FFFFFF" paddingTop="50" paddingBottom="50" paddingLeft="50">

<mx:Script>
<![CDATA[
import mx.core.*
// Declare and initialize the variables used in the component.
// The application sets the actual prodTotal value.
[Bindable]
public var pageNumber:Number=1;
[Bindable]
public var prodTotal:Number=0;

// Control the page contents by selectively hiding the header and
// footer based on the page type.
public function showPage(pageType:String):void
{
if (pageType == "first" || pageType == "middle")
{
// Hide the footer.
footer.includeInLayout=false;
footer.visible=false;
}
if (pageType == "middle" || pageType == "last")
{
// The header won't be used again; hide it.
header.includeInLayout=false;
header.visible=false;
}
if (pageType == "last")
{
// Show the footer.
footer.includeInLayout=true;
footer.visible=true;
}
//Update the DataGrid layout to reflect the results.
validateNow();
}
]]>
</mx:Script>

<!-- The template for the printed page, with the contents for all pages. -->
<mx:VBox width="80%" horizontalAlign="left">
<mx:Label text="Page {pageNumber}"/>
</mx:VBox>

<FormPrintHeader id="header"/>
<!-- The data grid. The sizeToPage property is true by default, so the last
page has only as many grid rows as are needed for the data. -->
<mx:PrintDataGrid id="myDataGrid" width="60%" height="100%">
<!-- Specify the columns to ensure that their order is correct. -->
<mx:columns>
<mx:DataGridColumn dataField="Index"/>
<mx:DataGridColumn dataField="Qty"/>
</mx:columns>
</mx:PrintDataGrid>

<!-- Create a FormPrintFooter control and set its prodTotal variable. -->
<FormPrintFooter id="footer" pTotal="{prodTotal}"/>

</mx:VBox>


FormPrintHeader.mxml

<?xml version="1.0"?>
<!-- Custom control for the header area of the printed page. -->

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="60%" horizontalAlign="right">

<mx:Label text="This is a placeholder for first page contents"/>
</mx:VBox>


FormPrintFooter.mxml

<?xml version="1.0"?>
<!-- Custom control for the footer area of the printed page. -->

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="60%" horizontalAlign="right">
<!-- Declare and initialize the product total variable. -->

<mx:Script>
<![CDATA[
[Bindable]
public var pTotal:Number=0;
]]>
</mx:Script>
<mx:Label text="Product Total: {pTotal}"/>
</mx:VBox>


Examples:-

Posted by 1010