delphi 官網上開始也來越多的介紹delphi與extjs 結合的例子，今天我就把官方的例子翻版一下。

官方使用C++builder 和webbroker 實現。

我使用kbmmw 來實現一下。

老規矩，先要實現服務器端，這個服務器端也很簡單，就是把一個圖片文件轉換成base64,然後封裝成json 輸出到瀏覽器上。

直接代碼：

function Twebsrv.getimg: string;
var
  mybase64:TBase64Encoding;
  myfs:Tfilestream;
  myss:Tstringstream;

begin

    mybase64:
 
=TBase64Encoding.Create(0);
    myfs:=Tfilestream.Create(‘D:\picture\1.jpg‘,fmOpenRead );
    myss:=Tstringstream.Create;
    try

    mybase64.Encode(myfs,myss );

    result:=‘[{"img":"data:image/jpeg;base64,‘+myss.DataString+‘"}]‘;

    finally
        mybase64.Free;
        myfs.Free;
        myss.Free;

    
 
end;
end;

再處理一下對應的http get 操作

function Twebsrv.Performget(ClientIdent:TkbmMWClientIdentity; const AURL:string; const Args:array of Variant):Variant;
var
  mystringstream:Tstringstream;
  MimeType,s,scallback:string;
  Charset,tablename:string;
  qv:TkbmMWHTTPQueryValues;
  dataurl,mysql,swhere:
 
string;
    I: Integer;
begin

    qv:=TkbmMWHTTPQueryValues.Create;
    dataurl:=args[0];
    qv.AsString:=Args[2];
   if length(Args)<1 then
        kbmMWRaiseException(KBMMW_ERR_SERVICE_HTTP_URLMISSING,‘Missing URL.‘);

  try

    if args[0]=‘/version‘ then
    begin
        result:=‘kbmmw 5.03‘;
        exit;
    end;

    if args[0]=‘/getimg‘ then
      begin
        s:=getimg;

        scallback:=qv.ValueByName[‘callback‘];
             if scallback<>‘‘  then
                result:=scallback+‘(‘+s+‘)‘
              else
                Result:=s;
             exit;

      end;


    ......

      result:=inherited Performget(ClientIdent,aurl,Args) ;
   finally
        qv.Free;
       

   end;
end;

編譯運行，在瀏覽器裏面輸入http://localhost/getimg.

輸出正常，服務器端搞定，下面設計extjs.

加一個datastore.

設置對應的屬性。

在view 裏面建立對應的控件

並建立按鈕的點擊事件

Ext.define(‘MyApp.view.MyFormViewController‘, {
    extend: ‘Ext.app.ViewController‘,
    alias: ‘controller.myform‘,

    onButtonClick: function(button, e, eOpts) {
        var me = this;
        var store = Ext.getStore(‘MyJsonPStore‘);

        store.load({
            callback: function (records) {
                var img = me.lookup(‘xalionimg‘);
                img.setSrc(records[0].get(‘img‘));
            }
        });
    }

});

ok，發布這個應用。

在瀏覽器裏面輸入http://localhost/index.html

點擊按鈕，就可以顯示出來圖像了

ok, 搞定了。

剩下的就是學習extjs 的知識了。

kbmmw 與extjs 通過JSON Base64 顯示圖片