ExtJs4.1:结合现有Laz例程生成酷Grid页面

2023-11-07 09:40

本文主要是介绍ExtJs4.1:结合现有Laz例程生成酷Grid页面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  安装完laz1.0之后,找到目录:
lazarus\fpc\2.6.0\source\packages\fcl-web\examples\webdata,这是演示CGI方式读取数据库中数据,并用浏览器展示的一个程序。可能它所用的ext版本比较老了吧,我试了半天都不能让他正常显示。
    这个如果能正常使用,还是蛮有意思的。我给大家讲一下怎样弄才能让它正常显示。
    先上结果图,ext弄出的效果还是很华丽的,大家可以看看他例子中各种各样炫的chart图,这也是让我花费不少时间弄这个东西的原因:

    我用的extjs是4.1。
   
    1、先编译server程序extgrid,生成一个exe程序后直接扔到apache2.2\cgi-bin目录,再把
lazarus\fpc\2.6.0\source\packages\fcl-web\examples\webdata\users.dbf这个数据库文件也扔到同一目录下。这时候,我们启动apache,然后访问以下这个url:

http://localhost/cgi-bin/extgrid.exe/read

    可以看到服务器返回json数据格式的内容:

{ "rows" : [{ "ID" : 0, "LOGIN" : "Daniel", "NAME" : "Daniel mantione", "EMAIL" : "daniel@freepascal.org", "LASTLOGIN" : null }, { "ID" : 1, "LOGIN" : "Florian", "NAME" : "Florian Klaempfl", "EMAIL" : "florian@freepascal.org", "LASTLOGIN" : null }, { "ID" : 2, "LOGIN" : "Joost", "NAME" : "Joost van der Sluis", "EMAIL" : "joost@freepascal.org", "LASTLOGIN" : null }, { "ID" : 3, "LOGIN" : "Jonas", "NAME" : "Jonas Maebe", "EMAIL" : "jonas@freepascal.org", "LASTLOGIN" : null }, { "ID" : 4, "LOGIN" : "Michael", "NAME" : "Michael van canneyt", "EMAIL" : "michael@freepascal.org", "LASTLOGIN" : null }, { "ID" : 5, "LOGIN" : "Marco", "NAME" : "Marco Van De Voort", "EMAIL" : "marco@freepascal.org", "LASTLOGIN" : null }, { "ID" : 6, "LOGIN" : "Pierre", "NAME" : "Pierre Muller", "EMAIL" : "pierre@freepascal.org", "LASTLOGIN" : null }, { "ID" : 7, "LOGIN" : "Tomas", "NAME" : "Tomas Hajny", "EMAIL" : "tomas@freepascal.org", "LASTLOGIN" : null }, { "ID" : 14, "LOGIN" : "eeedd", "NAME" : "BBBQqqq", "EMAIL" : null, "LASTLOGIN" : null }, { "ID" : 15, "LOGIN" : "AAA", "NAME" : "BBBddd", "EMAIL" : "CCC", "LASTLOGIN" : null }], "success" : true }

    我们下一步在表格中显示这些内容。

    2、下载并安装Sencha Architect 2.1,大家不要怕麻烦,这个东西还是很不错的,通过拖拽直接形成js界面,而且跨平台。缺点是30天试用期。下载地址:http://www.sencha.com/products/architect/
    下载ext js4.1,解压后,放到apache2.2\htdocs\ext目录下。

    下面用最精简的步骤说明一下页面程序的制作(我也是刚学,太复杂的还不会):
    3、启动 Architect,在欢迎界面,选择 extjs 4.1。
    然后首先ctrl+s,
 

 

  4、从左边containers类别中选panel,拖放到设计区,用panel右下角的标签来把panel拉大一些。
 



    5、从grids类别中选一个Grid Panel放到上一个panel中。
    6、选中右侧model,点“+”按钮,然后点击model。
 



    设置一下参数:选中model,下面属性列表中找到fields,点右面“+”,输入“ID”然后回车。重复以上步骤,分别增加输入:LOGIN、NAME、EMAIL、LASTLOGIN。
    7、增加一个store。选中Stores,点击右上“+”,点击store中的json store,这样,我们就新增一个store:MyJsonStore。
设置它的model属性值为刚才新增的myModel。autoload值为选中。
选中MyAjaxProxy,设置url值为:/cgi-bin/extgrid.exe/read。这值就是刚才我们访问服务器的url。
选中MyJsonReader,设置root值为:rows。这值可以从前面服务器的返回json值中找到。
    8、选中My Grid Panel,设置它的store值为MyJsonStore,以及他的autoRender也需要选中。
右击MyJsonStore,点auto columns。
 



    9、这样基本完成了。发布之前需要设置一下:
 

   并且需要修改一下userdemo目录下的app.html文件:

<!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>userdemo</title>
    <script src="/ext/ext-all.js"></script>
    <link rel="stylesheet" href="/ext/resources/css/ext-all.css">
    <script type="text/javascript" src="app.js?_dc=1355293924909"></script>
</head>
<body></body>
</html>

    这个可能是程序的bug吧,每次保存修改后,发布预览都需要改一下这个文件。

    现在浏览  http://localhost/demo/app.html  就可以看到效果了。

    感觉extjs搭配lazarus开发b/s应用还是很不错的,不像php、asp,一大堆html和script混在一起,头都大了。用我们熟悉的pascal语言进行后台操作,用extjs制作华丽的前台页面,这种搭配应该说是比较理想。特别是laz可以开发Fast-cgi程序,效率应该说有很大的提高,不过现在我不清楚这种方式与php和asp相比效率如何,有待验证。

    这个小文算是抛砖引玉,欢迎大家交流,共同提高。





这篇关于ExtJs4.1:结合现有Laz例程生成酷Grid页面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/362783

相关文章

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应

SpringBoot结合Docker进行容器化处理指南

《SpringBoot结合Docker进行容器化处理指南》在当今快速发展的软件工程领域,SpringBoot和Docker已经成为现代Java开发者的必备工具,本文将深入讲解如何将一个SpringBo... 目录前言一、为什么选择 Spring Bootjavascript + docker1. 快速部署与

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Python实现自动化Word文档样式复制与内容生成

《Python实现自动化Word文档样式复制与内容生成》在办公自动化领域,高效处理Word文档的样式和内容复制是一个常见需求,本文将展示如何利用Python的python-docx库实现... 目录一、为什么需要自动化 Word 文档处理二、核心功能实现:样式与表格的深度复制1. 表格复制(含样式与内容)2

python如何生成指定文件大小

《python如何生成指定文件大小》:本文主要介绍python如何生成指定文件大小的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python生成指定文件大小方法一(速度最快)方法二(中等速度)方法三(生成可读文本文件–较慢)方法四(使用内存映射高效生成

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

MybatisX快速生成增删改查的方法示例

《MybatisX快速生成增删改查的方法示例》MybatisX是基于IDEA的MyBatis/MyBatis-Plus开发插件,本文主要介绍了MybatisX快速生成增删改查的方法示例,文中通过示例代... 目录1 安装2 基本功能2.1 XML跳转2.2 代码生成2.2.1 生成.xml中的sql语句头2