前面寫了extjs 的安裝,今天寫一下kbmmw 與extjs 的結合,參照delphi 產品經理marco文章 。
由於extjs 設計時要讀取服務器端的數據,所以先要做一個rest 服務器。
先要用kbmmw 建一個web 服務器,可以參照我以前寫的例子。
由於要返回數據庫,因此加入對應的數據庫訪問控件,我使用unidac 加postgresql,需要的可以在
www.hoasql.com 去下載。
我們開始寫服務器端。加上必要的數據庫訪問控件,並保證運行正常。

進入webservice 單元,加對應的代碼。
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]='/getdata' then begin tablename:=qv.ValueByName['tname'] ; if tablename='' then begin result:='表名不能為空!'; exit; end; swhere:= qv.ValueByName['where']; //where 需要編碼。注意注入 if swhere<>'' then begin if pos(';',swhere)>0 then begin result:='非法條件!'; exit; end; swhere:=' where '+swhere; end; mysql:='select * from '+tablename; mysql:=mysql+swhere; s:=datatojson(tablename, mysql,'',''); scallback:=qv.ValueByName['callback']; if scallback<>'' then result:=scallback+'('+s+')' else Result:=s; exit; end; result:=inherited Performget(ClientIdent,aurl,Args) ; finally qv.Free; mystringstream.Free; end; end;
下面是數據庫轉json 的代碼
function Twebsrv.datatojson(tname,datasql, startp, endp: string; inparams: tstringlist = nil): string; var sjosn:TkbmMWJSONStreamer; alljson: TkbmMWJSONObject; datajson: TkbmMWJSONArray; recordjson: TkbmMWJSONObject; starti, endi, i: integer; idate:int64; mydate:Tdatetime; begin if startp = '' then starti := 0 else starti := strtoint(startp); alljson := TkbmMWJSONObject.Create;// ( (stobject); sjosn:=TkbmMWJSONStreamer.Create; try with cx do begin sql.clear; sql.add(datasql); if inparams <> nil then begin for i := 0 to inparams.Count - 1 do begin if inparams.Names[i] <> '' then begin cx.Parambyname[inparams.Names[i]].AsString := inparams.ValueFromIndex[i]; end; end; end; try Open; except result:='數據庫打開錯誤!2'; exit; end; datajson :=TkbmMWJSONArray.Create;//(starray); while not eof do begin recordjson :=TkbmMWJSONObject.Create; for i := 0 to fields.Count - 1 do begin case fields[i].DataType of ftDate, ftTime, ftDateTime: begin mydate:=fields[i].AsDateTime; recordjson.AsString[fields[i].FieldName]:=formatdatetime('yyyy-mm-dd hh:nn:ss',mydate); end else recordjson .AsString[fields[i].FieldName ]:= fields[i].AsString; end; end; datajson.add(recordjson); next; end; alljson.AsArray[tname] := datajson; end; result := sjosn.SaveToUTF16String(alljson); finally sjosn.Free; alljson.Free; end; end;
保存並運行。可以在瀏覽器里面輸入http://localhost/getdata?tname=emp 訪問服務器。
firefox 會返回這樣

原始數據

好了,服務器做好,讓它正常運行。
我們下載打開extjs 設計器
開啟一個空白新工程

點擊加號,選擇一個新模型。
再新建一個Stores.選擇JSONStore.

再右面屬性欄,設置它的model.並選擇autoload。

把MyajaxProxy 轉換成MyJSONPProxy
設置myJSONPProxy 的URL.

ok, 可以右鍵選擇datastore, loaddata, 然后就會出現一下眼睛圖標。點擊就可以看見服務器返回的數據了。

說明服務器工作正常。
現在拖一個gridpanel 到設計器上。

系統自動生成幾個列。先不要管它,選擇它的datastore 為myjsonstore.

右鍵選擇,開始gird builder.

加入對應的字段,就可以生成gird了

ok, 保存工程文件。
在主文件菜單選擇發布 命令(或者按F5)。

選擇kbmmw 的web 服務器的文件目錄並發布文件。

發布完成。
回到瀏覽器,輸入http://localhost/index.html。

可以正常顯示數據了。
當然了,還沒有添加增、刪、改的功能,這些對應服務器上也要做對應的處理,今天就不做了。
等以后有機會再做。
