前面写了extjs 的安装,今天写一下kbmmw 与extjs 的结合,参照delphi 产品经理marco文章 . 由于extjs 设计时要读取服务器端的数据,所以先要做一个rest 服务器. 先要用kbmmw 建一个web 服务器,可以参照我以前写的例子. 由于要返回数据库,因此加入对应的数据库访问控件,我使用unidac 加postgresql,需要的可以在 www.hoasql.com 去下载. 我们开始写服务器端.加上必要的数据库访问控件,并保证运行正常. 进入webservice 单…

delphi 官网上开始也来越多的介绍delphi与extjs 结合的例子,今天我就把官方的例子翻版一下. 官方使用C++builder 和webbroker 实现. 我使用kbmmw 来实现一下. 老规矩,先要实现服务器端,这个服务器端也很简单,就是把一个图片文件转换成base64,然后封装成json 输出到浏览器上. 直接代码: function Twebsrv.getimg: string; var mybase64:TBase64Encoding; myfs:Tfilestream; m…

有同学在使用kbmmw 与extjs 结合的时候,涉及到了跨域访问,这个在 kbmmw 里面已经完全解决. extjs 在访问跨域的时候,首先会使用OPIONS  调用,服务端要根据浏览器请求的 head 来回应客户端,如果正确,则客户端再调用GET 方式访问服务器. 像不像我们地下党接头一样,首先要对一下暗号,暗号正确,开始交出城防图,不正确,对不起,开枪! 服务器端的代码,kbmmw 已经替大家处理了,很简单,只是设置允许访问的信息. [kbmMW_Method] [kbmMW_Rest('…

以前,我们通过自己写json 来返回数据表的内容.在delphi 10.2.2中,官方自带了一个FDBatchMoveJSONWriter1 来直接处理数据库内容.把结果推送到浏览器客户端. 今天我们就利用kbmmw 自身的功能,做一个类似的东西. 在主界面放上相关的数据库访问控件 首先在服务上放两个东西 一个查询,一个kbmmwjsonstreamformat. 定义相关的函数 [kbmMW_Rest('method:get, path:getdata')] [kbmMW_Method] fu…

本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主页布局 传统的ExtJS 4.2应用,基本布局如下: 1.2 主页布局分析 根据上面的主页布局图,可转换具体试图结构: header:存放系统的名称.logo.用户信息等内容. menu:菜单区域,以Tree形态展现业务入口. tab:业务区域,具体的业务都以tab页的形式嵌入到此区域. 1.3 主…

最近在做博客项目,后台管理用的是ExtJs4.2.1版本,因为是初学所以在使用的时候也遇到不少的这样或那样的问题,也写了不少这方面的博客,今天要写的博客是关于复选框数据项动态的加载功能,以前也没用过,初次用,不知道怎么动态加载,静态加载很容易,添加itmes就可以了,于是我在网上找找有关这方面的博客,找到一篇,不过遗憾的是,这种方法太糟糕了,不是很方便,于是找到了一个很好的解决方法: //点击编辑弹出的formpanel var formPanel = new Ext.FormPanel({ /…

最近公司开发项目在用ExtJs,碰到验证的就大概的总结了一些常用的验证.自定义的验证主要有两种方式:一种是单字段的自定义验证,另一种是多字段间的验证.对于单字段的验证主要通过regex配置项指定自定义正则表达式进行验证,而字段多的验证可以通过字定义VType类型进行验证支持. Ext.apply(Ext.form.VTypes, { daterange: function(val, field) { var date = field.parseDate(val); // We need to f…

Tree Panel是ExtJS中最多能的组件之一,它非常适合用于展示分层的数据.Tree Panel和Grid Panel继承自相同的基类,所以所有从Grid Panel能获得到的特性.扩展.插件等带来的好处,在Tree Panel中也同样可以获得.列.列宽调整.拖拽.渲染器.排序.过滤等特性,在两种组件中都是差不多的工作方式.让我们开始创建一个简单的树组件   Ext.create('Ext.tree.Panel', { renderTo: Ext.getBody(), title: 'Si…

extjs表单验证 //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息. Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为 qtip-当鼠标移动到控件上面时显示提示 title-在浏览器的标题显示,但是测试结果是和qtip一样的 under-在控件的底下显示错误提示 side-在控件右边显示一个错误图标,鼠标指向图标…

上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar扩展插件,在此基础上做了移植到ExtJS 4.2,并扩展了默认值.form表单支持等功能. 1.1 JavaScript代码 /*! * 评分组件 */ Ext.define('App.Demo.RatingStarFiledDemoTab', { extend: 'Ext.panel.Panel'…