Extjs Django Adobe Air全用上 – SimpleLife开发小记（上）

周末闲来无事，加上心情不错，决心突破一下Extjs给我留下的心理障碍，过了这道坎。重新下载了extjs 2.2的文件包，然后开始狂搜入门文章，真的是太少了。然后开始找几个看起来比较顺眼的demo，猛看源代码。

要上手当然要有个程序来下手，前两天简单做过的关于Getting Things Done的那个工作任务管理程序真是再适合不过了，功能简单，貌似有用，界面少，却可以独立成站，而且已经有了成型的思路（甚至成型的程序），上手要容易很多，只要把精力关注于Extjs上面就可以了。

进入开发环境，用现成的项目复制出一套Django的运行环境，把用户注册登录和任务管理的部分复制过来，稍微改点配置，建立数据库，运行测试服务器，OK，可以跑起来了。

然后把extjs的js文件，css文件和图片文件复制过来，正式开工。

首先是确定页面布局，走了不少弯路。一开始new出四个Ext.Panel放到页面上，结果四个自动垂直排列下来，我想把它搞成横着四列的，结果各种布局的名字和解释研究来研究去找不着门，后来，先在body里放了个table，做四列一样宽的td，里面放个带id的div，然后指定每个Panel的renderTo属性到各自的div，嗯，虽然方法很丑陋，但是效果算是出来了。以后再优化吧。在Table前面加个div，再new一个Panel，做成Header。

然后是显示任务内容。js与服务器端的交互不用说了，肯定是json，不过django的序列化功能自动生成的json格式太奇怪，还是自己拼字符串来的方便。extjs有个JsonReader，从JsonReader又找到了JsonStore，这个东西本身就是JsonReader和HttpProxy的综合体，可以直接设定URL参数读取返回的JSON数据并解析成Data数据源。配合XTemplate，可以很方便而且自动的生成DataView。XTemplate就是普通的HTML，有几个简单的TPL标记可以用，比如JSON里面的每一条记录为{id:1,name:’jason’,title:’标题’}，那么在TPL的定义里就可以直接在HTML中间插入{name}，在生成DataView的时候就可以自动把对应的值替换进去，生成的DataView中的每一行都是一套完整的TPL模板。

嗯，看起来很简单，实际也确实如此，在四个Panel的items属性里分别new一个DataView，加上tpl和store的属性，就OK了，可以读取并显示出来了。HTML定义成什么样，显示出来的就是什么样。简单起见，每行放一个div，里面放一个table用来布局。

随后就遇到了第一个难题，JSON里面有两个字段是int型，但是显示的时候需要显示成对应的文本，比如重要性字段，0代表重要，1代表一般，2代表不重要。但是在XTemplate和JsonStore里面都没有找到合适的办法来简单的替换这个值，花了三个小时仍然没有找到可以使用JS数组来自动替换的方法，最后，又一次妥协了，在TPL里面用三个if语句来输出对应的文本。啊，好土。

显示问题已经解决，剩下就是往服务器上保存数据的问题了。按照以前的习惯，我会在服务器上建一个没有框架的页面，用于在Ajax里加载该页面显示在当前页的一个层里面，这样新建或者编辑数据的时候，都是在服务器端初始化各个字段的内容，相对于用JS来初始化HTML字段来说，要容易很多。但是Extjs既然号称富客户端，当然不能这么干了，嗯，就用JS来生成这个写数据的时候的对话框吧。

先是在网上找到了做登录窗口的代码，new一个Ext.FormPanel，定义标题、宽、高等，在它的items属性里放多个Field，Extjs已经定义了许多不同的Field类型，比如TextField,PasswordField,TextArea,ComboBox等等，而且，字段还有自带的客户端验证，可以很方便的验证是否为空（不允许为空的字段都填完之前提交按钮始终是禁用的），两次输入的密码是否一致，Email是否合法等等，非常方便。而且FormPanel里面的Form还可以通过一个URL获取一条记录的JSON格式数据，自动初始化各个字段的值，用于编辑记录的时候真是太方便了。而且配合Ext的QuickTips，错误提示也非常友好。

以这个抄来的登录窗口为原型，完成了登录注册和添加新任务的对话框，而且服务器端的代码也非常简单，因为现在不需要处理GET事件了，只要管POST的结果就可以了，登录过程还是跟以前一样，直接记在session里就可以（django会自动发送sessionid到客户端，保存在客户端cookie里）。四种不同类型的任务所需要的字段不同，但是大家用的是同一条记录，弹出的也是同一个编辑框，根据任务类型来判断需要显示哪些字段就可以了。

用了一天半的时间，将完整的任务管理程序移植成了一个新站点，并且完全的Extjs操作，很有成就感。给新站点起个名字SimpleLife，简单生活，让你的生活变得更简单。目前放在原有域名下，懒的买新域名了。有兴趣的朋友可以试试看：http://sl.unfish.net 本文秉承本人的不贴代码的习惯，不过JS开发网站的好处就是，你可以把网页另存为……