Practical development of extjs attachment upload, batch upload and Online Preview (4)

Online Preview:

Software used: flexpaper1.5.6.

Flexpaper is a secondary development dual version, and Version 1 is opened in the JS control document. It is similar to many materials on the Internet, but many functions have been improved. For details, see the previous article; in version 2, flexpaper directly obtains the address parameter to open the document. The specific code is as follows:

Version 1:

<? XML version = "1.0" encoding = "UTF-8"?> <Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" xmlns: fp = "com. devaldi. controls. flexpaper. * "layout =" absolute "width =" 100% "Height =" 100% "applicationcomplete =" initapp (); "> <mx: Metadata> [resourcebundle (" flexpaper ")] [event (name = "ondocumentloaded", type = "com. devaldi. events. documentloadedevent ")] [event (name =" onloadingprogress ", type =" flash. events. progressevent ")] [event (name =" ondocumentloadederror ", Type =" flash. events. errorevent ")] [event (name =" oncurrpagechanged ", type =" com. devaldi. events. currentpagechangedevent ")] [event (name =" ondocumentloading ", type =" flash. events. event ")] [event (name =" onexternallinkclicked ", type =" com. devaldi. events. externallinkclickedevent ")] [event (name =" ondocumentprinted ", type =" com. devaldi. events. documentprintedevent ")] [event (name =" onpageloaded ", type =" com. devaldi. event S. pageloadedevent ")] [event (name =" onpageloading ", type =" com. devaldi. events. pageloadingevent ")] [event (name =" onerrorloadingpage ", type =" com. devaldi. events. errorloadingpageevent ")] </MX: Metadata> <mx: SCRIPT> <! [CDATA [import MX. controls. alert; import COM. devaldi. events. currentpagechangedevent; import COM. devaldi. events. cursormodechangedevent; import COM. devaldi. events. documentloadedevent; import COM. devaldi. events. documentprintedevent; import COM. devaldi. events. errorloadingpageevent; import COM. devaldi. events. externallinkclickedevent; import COM. devaldi. events. fitmodechangedevent; import COM. devaldi. events. scalec Hangedevent; import COM. devaldi. events. viewmodechangedevent; Public VaR _ Aid: Number = 0; // Document ID [Bindable] public VaR _ scale: Number = 1; // scale ratio [Bindable] public VaR _ encodeuri: boolean = true; [Bindable] public VaR _ swffile: String = ""; // SWF file path [Bindable] public VaR _ zoomtransition: String = "easeout "; [Bindable] public VaR _ zoomtime: Number = 0.6; [Bindable] public VaR _ zoominterval: Number = 0.1; [Bindable] public VaR _ minzoomsize: Number = 0.3; [Bindable] public VaR _ maxzoomsize: Number = 5; [Bindable] public VaR _ fitpageonload: Boolean = false; // fit the height after loading [Bindable] public VaR _ fitwidthonload: Boolean = false; // fit the width after loading [Bindable] public VaR _ printenabled: Boolean = true; // whether [Bindable] public VaR _ fullscreenasmaxwindow: Boolean = false; // whether to pay full screen [Bindable] public VaR _ progressiveloading: Boolean = false; // whether to delay loading [Bindable] P Ublic VaR _ localechain: String = "zh_cn"; // language private var isfocus: Boolean = false; // ---------------------- [Bindable] public VaR _ searchmatchall: Boolean = true; [Bindable] public VaR _ printpaperasbitmap: Boolean = false; [Bindable] public VaR _ viewmod1_lsvisible: Boolean = true; [Bindable] public VaR _ zoomtoolsvisible: Boolean = true; [Bindable] public VaR _ navtoolsvisible: Boolean = true; [Bindable] public VaR _ Cursortoolsvisible: Boolean = true; [Bindable] public VaR _ searchtoolsvisible: Boolean = true; // initialize the private function initapp (): void {var Params: Object = application. application. parameters; _ scale = getnumber (Params, "scale", 1); _ swffile = getstring (Params, "swffile", "paper.swf"); _ encodeuri = getnumber (Params, "encodeuri", 1); _ zoomtransition = getstring (Params, "zoomtransition", "easeout"); _ zoomtime = Getnumber (Params, "zoomtime", 0.6); _ minzoomsize = getnumber (Params, "minzoomsize", 0.2); _ maxzoomsize = getnumber (Params, "maxzoomsize", 5 ); _ zoominterval = getnumber (Params, "zoominterval", 0.1); _ fitpageonload = getboolean (Params, "fitpageonload", false); _ fitwidthonload = getboolean (Params, "fitwidthonload ", false); _ printenabled = getboolean (Params, "printenabled", true); _ fullscreenasmaxwindow = Getboolean (Params, "fullscreenasmaxwindow", false); _ progressiveloading = getboolean (Params, "progressiveloading", true); _ localechain = Params ["localechain"]; _ searchmatchall = getboolean (Params, "searchmatchall", true); _ printpaperasbitmap = getboolean (Params, "Callback", false); _ viewmod1_lsvisible = getboolean (Params, "viewmod1_lsvisible ", true); _ zoomtoolsvisible = getboolean (Params, "zoomtoo Lsvisible ", true); _ navtoolsvisible = getboolean (Params," navtoolsvisible ", true); _ cursortoolsvisible = getboolean (Params," cursortoolsvisible ", true ); _ searchtoolsvisible = getboolean (Params, "searchtoolsvisible", true); // register the event to listen to this. addeventlistener (mouseevent. mouse_over, onmouseover); this. addeventlistener (mouseevent. mouse_out, onmouseout); this. addeventlistener (mouseevent. click, setfocusto); this. addeventl Istener ("onpageloaded", pageloadedeventhandler); // open it to external (JavaScript) to call externalinterface. addcallback ("hasfocus", hasfocus); externalinterface. addcallback ("setviewerfocus", setviewerfocus); externalinterface. addcallback ("gotopage", gotopage); externalinterface. addcallback ("fitwidth", fitwidth); externalinterface. addcallback ("fitheight", fitheight); externalinterface. addcallback ("loadswf", loadswf); externa Linterface. addcallback ("printpaperrange", printpaperrange); externalinterface. addcallback ("searchtext", searchtext); externalinterface. addcallback ("prevsearchmatch", prevsearchmatch); externalinterface. addcallback ("nextsearchmatch", nextsearchmatch); externalinterface. addcallback ("switchmode", switchmode); externalinterface. addcallback ("zoom", zoom); externalinterface. addcallback( "nextpage", nextpage); e Xternalinterface. addcallback ("getcurrpage", getcurrpage); externalinterface. addcallback ("prevpage", prevpage); externalinterface. addcallback ("printpaper", printpaper); externalinterface. addcallback ("gettotalpages", gettotalpages);} // callback event Protected function onloadederror (Event: errorevent): void {dispatchevent (event);} private function setfocusto (E: Mou) Seevent): void {stage. stagefocusrect = false; stage. focus = e.tar get as interactiveobject;} private function onmouseover (Event: mouseevent): void {This. isfocus = true;} private function onmouseout (Event: mouseevent): void {This. isfocus = false;} protected function oncurrpagechanged (Event: currentpagechangedevent): void {dispatchevent (event);} protected function documentloadederrorhandler (Event: Event): void {dispatc Hevent (event);} protected function onexternallinkclickedhandler (Event: Handler): void {dispatchevent (event);} protected function handle (Event: progressevent): void {dispatchevent (event );} protected function papersloadinghandler (Event: Event): void {dispatchevent (event);} protected function pageloadingeventhandler (Event: Event): void {dispatchevent (event);} protected funct Ion documentprintedhandler (Event: documentprintedevent): void {dispatchevent (event);} protected function documentloadedhandler (Event: Event): void {dispatchevent (event);} protected function cancel (event: event): void {dispatchevent (event);} protected function errorloadingpageeventhandler (Event: errorloadingpageevent): void {dispatchevent (event);} // callback function ------------------- ---------- Public function gettotalpages (): number {return flexpaper. gettotalpages ();} public function printpaper (E: Event): void {flexpaper. printpaper (E);} public function printpaperrange (range: string): void {flexpaper. printpaperrange (range);} public function searchtext (Text: string): void {flexpaper. searchtext (text);} public function prevsearchmatch (): void {flexpaper. prevsearchmatch ();} public function nextsearc Hmatch (Text: string): void {flexpaper. nextsearchmatch (text);} public function switchmode (Mode: String = NULL): void {flexpaper. switchmode (mode);} public function zoom (factor: Number): void {flexpaper. zoom (factor);} public function nextpage (): void {flexpaper. nextpage ();} public function prevpage (): void {return flexpaper. prevpage ();} public function getcurrpage (): number {return flexpaper. getcurrpage ();} public dynamic Function loadswf (S: string): void {flexpaper. swffile = s;} public function fitheight (): void {flexpaper. fitheight ();} public function fitwidth (): void {flexpaper. fitwidth ();} public function gotopage (P: Number): void {flexpaper. gotopage (p);} public function hasfocus (): Boolean {return isfocus;} public function setviewerfocus (isfocus: Boolean): void {This. flexpaper. setviewerfocus ();}/***** get string type parameter * If not, return the default value **/Private function getstring (Params: object, name: String, Def: string): String {If (Params [name]! = NULL) {return Params [name];} return def;} private function getnumber (Params: object, name: String, Def: number ): number {If (Params [name]! = NULL) {return Params [name];} return def;} private function getboolean (Params: object, name: String, Def: Boolean ): boolean {If (Params [name]! = NULL) {return Params [name] = "true";} return def ;}]]> </MX: SCRIPT> <FP: flexpaperviewer id = "flexpaper" width = "100%" Height = "100%" ondocumentloaded = "documentloadedhandler (event)" ondocumentloading = "papersloadinghandler (event)" ondocumentloadederror = "events (Event) "onloadingprogress =" events (event) "oncurrpagechanged =" events (event) "onexternallinkclicked =" events (event) "ondocumentprinted =" documentprintedhandler (event) "onpageloaded =" events (Event) "onpageloading =" pageloadingeventhandler (event) "onerrorloadingpage =" errorloadingpageeventhandler (Event) "scale =" {_ scale} "swffile =" {_ swffile} "zoomtransition =" {_ zoomtransition} "zoomtime =" {_ zoomtime} "minzoomsize =" {_ minzoomsize} "Expiration =" {_ interval} "zoominterval =" {_ zoominterval} "fitpageonload =" {_ fitpageonload} "fitwidthonload =" {_ fitwidthonload} "encodeuri =" {_ encodeuri} "Signature =" {_ signature} "Signature =" {_ signature} "searchmatchall =" {_ searchmatchall} "printpaperasbitmap =" {_ printpaperasbitmap} "viewmod1_lsvisible =" {_ viewmod1_lsvisible} "visible =" {_ visible} "navtoolsvisible =" {_ navtoolsvisible} "cursortoolsvisible =" {_ cursortoolsvisible} "searchtoolsvisible =" {_ searchtoolsvisible} "locale =" {_ localechain} "printenabled =" {_ printenabled} "/> </MX: application>

Usage:

var fp = new FlexPaperViewer('divPDF',{                 config : {                SwfFile :encodeURI(url+swf),                        Scale : 0.6,                         ZoomTransition : 'easeOut',                        ZoomTime : 0.5,                        ZoomInterval : 0.1,                        FitPageOnLoad : true,                        FitWidthOnLoad : true,                        PrintEnabled : false,                        FullScreenAsMaxWindow : true,                        ProgressiveLoading : true,                        MinZoomSize : 0.2,                        MaxZoomSize : 5,                        SearchMatchAll : true,                        InitViewMode : 'Portrait',                                                ViewModeToolsVisible : true,                        ZoomToolsVisible : true,                        NavToolsVisible : true,                        CursorToolsVisible : true,                        SearchToolsVisible : true,                        localeChain: 'zh_CN'                    }                });          

Note: If you have not modified the flexpaperviewer () function in the flexpaper_flash.js file, use

var fp = new FlexPaperViewer( 'FlexPaperViewer', 'divPDF', { config : { SwfFile : escape('FusionCharts.swf'), Scale : 0.6,  ZoomTransition : 'easeOut', ZoomTime : 0.5, ZoomInterval : 0.2, FitPageOnLoad : true, FitWidthOnLoad : false, FullScreenAsMaxWindow : false, ProgressiveLoading : false, MinZoomSize : 0.2, MaxZoomSize : 5, SearchMatchAll : false, InitViewMode : 'Portrait', PrintPaperAsBitmap : false, ViewModeToolsVisible : true, ZoomToolsVisible : true, NavToolsVisible : true, CursorToolsVisible : true, SearchToolsVisible : true,     localeChain: 'en_US'  }});

Divpdf is the container ID rendered by flexpaper. flexpaperviewer is your SWF file name. I will remove this parameter and directly go to flexpaper_flash.js.File.

Version 2:

<? XML version = "1.0" encoding = "UTF-8"?> <Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" xmlns: fp = "com. devaldi. controls. flexpaper. * "layout =" absolute "width =" 100% "Height =" 100% "applicationcomplete =" initapp (); "> <mx: SCRIPT> <! [CDATA [[Bindable] public VaR _ scale: Number = 1; // scale [Bindable] public VaR _ encodeuri: Boolean = true; [Bindable] public VaR _ swffile: string = ""; // SWF file path [Bindable] public VaR _ zoomtransition: String = "easeout"; [Bindable] public VaR _ zoomtime: Number = 0.6; [Bindable] public VaR _ zoominterval: Number = 0.1; [Bindable] public VaR _ minzoomsize: Number = 0.3; [Bindable] public VaR _ maxzoomsize: Number = 5; [Bindable] public VaR _ fitpageonload: Boolean = false; // suitable for height after loading [Bindable] public VaR _ fitwidthonload: Boolean = true; // after loading, the appropriate width is [Bindable] public VaR _ printenabled: Boolean = false; // whether [Bindable] public VaR _ fullscreenasmaxwindow: Boolean = false is supported; // whether to pay full screen [Bindable] public VaR _ progressiveloading: Boolean = false; // whether to delay loading [Bindable] public VaR _ localechain: String = "zh_cn "; // language private var isfocus: Boolean = false; // initialization parameter private function initapp (): void {_ scale = 1; _ swffile = This. loaderinfo. parameters. URL; _ encodeuri = true; _ zoomtransition = "easeout"; _ zoomtime = 0.6; _ minzoomsize = 0.2; _ maxzoomsize = 5; _ zoominterval = 0.1; _ fitpageonload = false; _ fitwidthonload = true; _ printenabled = false; _ fullscreenasmaxwindow = false; _ progressiveloading = true; _ localechain = "zh_cn"; // language // register event listening this. addeventlistener (mouseevent. mouse_over, onmouseover); this. addeventlistener (mouseevent. mouse_out, onmouseout);} // --------------------------- event ------------------------------ private function onmouseover (Event: mouseevent): void {This. isfocus = true;} private function onmouseout (Event: mouseevent): void {This. isfocus = false;}]> </MX: SCRIPT> <FP: flexpaperviewer id = "flexpaper" width = "100%" Height = "100%" scale = "{_ scale}" swffile = "{_ swffile}" zoomtransition = "{_ zoomtransition }" zoomtime = "{_ zoomtime}" Expiration = "{_ minzoomsize}" maxzoomsize = "{_ interval}" zoominterval = "{_ zoominterval}" fitpageonload = "{_ fitpageonload }" fitwidthonload = "{_ fitwidthonload}" encodeuri = "{_ encodeuri}" fullscreenasmaxwindow = "{_ fullscreenasmaxwindow}" Progress = "{_ progressiveloading}"/> </MX: application>

Here, this. loaderinfo. Parameters. url is used to obtain the address parameter for loading the flash, not the parameter of the current URL address. The main purpose of this modification is to pass the parameter when loading flexpaper.

The first version is easy to implement and the effect is as follows:

For the second version, enter http: // 192.168.1.100/diyflexpaper_url.swf in the browser address? Url1_1.swf

Note: The URL here can be a network address (as long as you have the permission), and the server stores the SWF address.

The effect is as follows:

Of course, this method is too obvious for information exposure. The customer knows what to use and the address to open it at a glance, so we can compile an HTML file separately and open the document.

At this point, the Document Upload and Online Preview functions have been fully summarized. You are welcome to comment.

Author:Kunoy Source:Http://blog.csdn.net/kunoy Statement:The authors write blogs to sum up experience and exchange learning.
If you need to reprint the statement, please keep it as much as possible and provide the original article connection clearly on the article page. Thank you!