KBMMW and ExtJS displaying pictures via JSON Base64

Delphi official online began also to introduce the Delphi and ExtJS combination of examples, today I will take the official example of a pirated.

Officially implemented using C++builder and WebBroker.

I use KBMMW to achieve this.

The usual, first to implement the server side, the server is also very simple, is to convert a picture file into Base64, and then encapsulated into a JSON output to the browser.

Direct code:

functionTWEBSRV.GETIMG:string;varmybase64:tbase64encoding;  Myfs:tfilestream; Myss:tstringstream;beginmybase64:=tbase64encoding.Create(0); MYFS:=tfilestream.Create('D:\picture\1.jpg', Fmopenread); Myss:=tstringstream.Create; Trymybase64.    Encode (Myfs,myss); Result:='[{"img": "Data:image/jpeg;base64,'+myss. datastring+'"}]';    finallymybase64.        Free; Myfs.        Free; Myss.    Free; End;End;

Handle the corresponding HTTP GET operation again

functionTwebsrv.performget (clientident:tkbmmwclientidentity;ConstAurl:string;ConstArgs:Array  ofvariant): Variant;varMystringstream:tstringstream; Mimetype,s,scallback:string; Charset,tablename:string;  Qv:tkbmmwhttpqueryvalues; Dataurl,mysql,swhere:string; I:integer;beginQV:=tkbmmwhttpqueryvalues.Create; Dataurl:=args[0]; qv. Asstring:=args[2]; ifLength (Args) <1  Thenkbmmwraiseexception (kbmmw_err_service_http_urlmissing,'Missing URL.'); Try    ifargs[0]='/version'  Then    beginResult:='KBMMW 5.03';    Exit End; ifargs[0]='/getimg'  Then      beginS:=getimg; Scallback:=qv. valuebyname['Callback']; ifScallback<>"'   ThenResult:=scallback+'('+s+')'              ElseResult:=s;      Exit End; ... result:=inheritedPerformget (Clientident,aurl,args); finallyQV.          Free; End;End;

Compile and run, enter http://localhost/getimg in the browser.

Output is normal, server-side, the following design ExtJS.

Add a datastore.

Sets the corresponding property.

Create a corresponding control in the view

and create a button click event

 ext.define (' MyApp.view.MyFormViewController '  ' Ext.app.ViewController '  ' Controller.myform ' , OnButtonClick:  function   (Button, E, eopts) { var  me = this  ;  var  store = Ext.getstore (' myjsonpstore '         ); Store.load ({callback:  function   (Reco RDS) { var  img = me.lookup (' xalionimg ' );            IMG.SETSRC (records[ 0].get (' img ' ));    }        }); }});

OK, publish the app.

Enter http://localhost/index.html inside the browser

Click on the button to display the image.

OK, it's done.

The rest is to learn the knowledge of ExtJS.

KBMMW and ExtJS displaying pictures via JSON Base64