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

本文主要是介绍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>


<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相比效率如何，有待验证。

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