Press "Enter" to skip to content

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开发网站的好处就是,你可以把网页另存为……

One Comment

  1. izee 2009年05月24日

    不错,正准备搞这个
    枚举类型的转换
    store的filed可以使用render

Comments are closed.