I'm creating a print function for my app. And I'm following the tutorial provided (printdemo) in the SDK, and using: printing-any-printer-using-touchpad-solution posted in precentral (I cannot post link/picture yet because I don't have enough post). The following is my modified PrintFrameView.jsjsjs $in$ $the$ $printdemo$.

However, my printout is not what I'm expecting like on the screen. What do I need to do in order to print the screen correctly to the PDF?

Can someone help? Thanks.


Code:
enyo.kind({
	name: "PrintFrameView",
	kind: enyo.VFlexBox,
	components: [
		{content: "This is a test program."},	

		{layoutKind: "HFlexLayout", components: [
			{flex: 8, kind: "VFlexBox", components: [		
				{flex:1, content: "Group A", style: "border:1px solid black; bgColor:black;"},
				{layoutKind: "HFlexLayout", style: "border:1px solid black;", components: [
					{content: "Number of people:", flex:2},
					{kind: "Input", name:"iptPeople1"},]}, 

				{layoutKind: "HFlexLayout",  style: "border:1px solid black;",components: [
					{content: "Number of Apples:", flex:2},
					{kind: "Input", name:"iptApple"},]}, 	
			]},
			
			{flex: 8, kind: "VFlexBox",   components: [		
				{flex:1, content: "Group B" , style: "border:1px solid black;bgColor:black;"},
				{layoutKind: "HFlexLayout", style: "border:1px solid black;", components: [
					{content: "Number of people:", flex:2},
					{kind: "Input", name:"iptPeople12"},]}, 

				{layoutKind: "HFlexLayout",  style: "border:1px solid black;", components: [
					{content: "Number of Oranges:", flex:2},
					{kind: "Input", name:"iptOrange"},]}, 
					
				{layoutKind: "HFlexLayout", components: [
					{kind: "Button", content: "Calculate"},
				]},
			]},
		]},
					
		{kind: "HFlexBox", defaultKind: "Button", components: [
			{caption: "Print Default Frame", flex: 1, onclick: "printDefaultFrameClick"},
			{caption: "Print Sample Frame", flex: 1, onclick: "printSampleFrameClick"},
		]},
		
		{kind: "PrintDialog", 
			duplexOption: true,
			mediaTypeOption: true,
			colorOption: true,
			qualityOption: true,
			appName: "PrintWebPage"},
			
	],
	printDefaultFrameClick: function() {
		this.$.printDialog.setFrameToPrint({name: ""});
		this.$.printDialog.openAtCenter();
	},
	printSampleFrameClick: function() {
		this.$.printDialog.setFrameToPrint({name: "sample-frame"});
		this.$.printDialog.openAtCenter();
	}
});