kbmmw 与extjs 的初次结合

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 前面写了extjs 的安装,今天写一下kbmmw 与extjs 的结合,参照delphi 产品经理marco文章 。 由于extjs 设计时要读取服务器端的数据,所以先要做一个rest 服务器。 先要用kbmmw 建一个web 服务器,可以参照我以前写的例子。

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

可以正常显示数据了。

当然了,还没有添加增、删、改的功能,这些对应服务器上也要做对应的处理,今天就不做了。

等以后有机会再做。

 

相关实践学习
基于CentOS快速搭建LAMP环境
本教程介绍如何搭建LAMP环境,其中LAMP分别代表Linux、Apache、MySQL和PHP。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
目录
相关文章
|
JavaScript 前端开发 CDN
Handlebars初次了解
Handlebars初次了解
98 0
Handlebars初次了解
|
JavaScript 前端开发 数据安全/隐私保护
SharePoint JavaScript 客户端对象使用视频教程
  本次视频教程是为大家介绍如何使用SharePoint JavaScript客户端对象,包括对于站点、列表、文档库、列表项、文件夹、文件和附件等基本对象的操作,同时,为大家举几个简单的应用的例子,让大家更加深刻的理解SharePoint JavaScript客户端对象的适用范围。
1242 0
|
JavaScript API 容器
[ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结
一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢? 目录 目录 ext...
1225 0
|
JSON 数据格式 前端开发
DWZ (JUI) 教程 dwz框架 刷新dialog解决方案
原文:DWZ (JUI) 教程 dwz框架 刷新dialog解决方案 在DWZ中进行ajax表单提交后,通过回调函数来返回状态结果,以及返回是否需要刷新父页的navTabId。       DWZ给我们提供了两个回调函数,一个是子窗口为navTab的navTabAjaxDone,一个是子窗口为dialog的dialogAjaxDone,但这两个回调函数都有同一样的缺陷:就是父窗口必须是navTab,也就是说只能刷新navTab,如果父窗口为dialog,则此父dialog是刷新不了的。
1293 0
|
前端开发 数据格式 JSON
DWZ(JUI) 教程 普通表单提交
原文:DWZ(JUI) 教程 普通表单提交 一类是普通的表单提交,另一类就是列表页面的表单提交,主要是用来查询搜索列表使用的。今天我就简单介绍一下前者。 这是官网上的普通列表页面, ...
1159 0
|
JSON JavaScript 数据格式
php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz)
原文:php_DWZ-JUI中碰到的问题解决方法详解(thinkphp+dwz)   折腾了两天,dwz删除后,数据不能自动刷新,解决方案,直接看图  。 1、 删除、修改状态后无法刷新记录; 在dwz.
1191 0

热门文章

最新文章