kbmmw 與extjs 的初次結合


前面寫了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。

可以正常顯示數據了。

當然了,還沒有添加增、刪、改的功能,這些對應服務器上也要做對應的處理,今天就不做了。

等以后有機會再做。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM