qeephp showgrid

一、起因

大概一个月前只是为了解答朋友jquery grid的问题，结果弄到很恼火。jquery用来简化javascript和实现一些animation很好很强大，但是要在UI上让人十分满意，这很 难。

于是叫朋友看Extjs好了，结果自己也看了起来。经过一些时日对javascript的理解之后，发现ext已经没有那么深奥。简单地搭建了些 viewport, tabPanel, window后。开始想Extjs这个东西到底可以应用到什么程度。网上对它诟病得最多的无非是它的复杂和效率。

当我觉得ext手册不再难得到我之后，复杂这回事就滚到一边吧，不过我还是要感叹一下Ext的庞大。每个Class里面的config options, properties, method and events似乎都能把滚动条缩到好小~

而它的效率，我不知道它会慢到什么程度会占多少资源。担忧并不能解答我的疑问，我还是需要亲自去感受一下。做什么好呢？既然问题是由jquery的 UI而起的，当然是拿来做大量的UI来比对一下了。这样做系统的后台就很合适。

二、设想

思路大概是用户登录后从菜单选择功能页，每个功能页都打开一个新的tab，而所有功能都要页面无刷新。

数据用表格的形式来罗列总是很称心。于是所有这些管理界面我都用editorGridPanel来实现。再加上PagingToolbar，展示数 据是没有大问题了。grid中的资料可以直接修改和删除记录。而新建，编辑某记录的全面资料是在Ext.Window中进行。

接下来选择框架。最近看起了QeePHP，它的orm和行为插件太迷人了，就用这个框架吧。同时要面对两个不太熟悉的东西，这下冒的险大了。

三、整合

现在回头看其实整合不难，当初因为对ext pagingToolBar, tabsPanel, gridPanel的情况不甚了解所以才很迷惘。

大致情况是在第一次进入系统（不是指登录界面）的时候要导入全局的js函数和设定。例如viewport和tabsPanel这两个雷打不动的家 伙。

然后每个功能页面各自导入自己的控件。加载到一个新的tab里面。围绕grid数据的是五个动作，read, create, delete, edit, 和inline edit。而我在Controller里面的五个action是，以products管理页面为例：

index: 返回products管理页面的页面构造。（目前所有控件都在这里构造好了。其实很多都可以延迟加载的，未来再实现吧）
get: 这个action是根据pagingToolBar的请求，返回分页的数据。
inlineEdit: 保存直接在grid中修改的数据
save: Qee中的create 和 update都可以由save()来完成。如果数据中提供了product_id就是update，反之是save
delete: 删除数据。

做好这些后，外观上已经不错，在IE8, FF里面兼容得很好。其它浏览器没有时间测试。

拿着这个小作品在左看右看的时候觉得自己都快散了架：写JS工作量还是太大了。没算上调试的时间，仅仅是写code就很吐血，特别是当数据表字段一 多起来。在JsonStore, ColumnModel, FormPanel中大部分字段基本都重复出现了三次，每次的格式又不太一样。直接晕倒~

四、封装

把重复的字段抽离，把JsonStore, ColumnModel, FormPanel的定义规则封装好，就可以应用到所有功能页面中了。

既然后台的展现都是以数据表为中心，数据表在Qee中都有个Model对应着，所以给Model添加行为就最正确不过了。而在行为插件中定义的行 为，可以被各个Model重复使用。

在model的meta里面收集好各字段的desc, validations, 另外还需要在config目录下建一个grids文件夹，里面放各个grid的配置，来控制各个字段在UI中的展现，例如showInGrid, readonly, renderer, editor.

然后把Qee Model中的validation转换成Ext.form.Field的validation。让验证尽量提前到在客户端完成，可以减少服务器的访问次 数。再说Ext的验证真是帅到掉渣。

OK了，回头再看看那一大段的JS代码，已经缩减了很多很多。现在只是初步封装，迟点等页面结构成熟了，把所有控件都封装进去，到时只 要<?=Product::meta()->showGrid() ?> 那一堆JS就自己冒出来吧。

五、继续完善。。。

现在要做功能全面的东西出来时间和精力都不够。还是先关注“灵活”这东西吧。就拿封装来说，不是说把js都用PHP echo出来就行了，还需要有点前瞻，不要未来有个新的需求就把前面做的全盘打翻了。

六、关于JQuery和Extjs

jquery在普通的网页应用中还是非常出色的，它的轻便与简单易学，没有辜负它的口号：write less, do more。

而Ext，它的那一整套UI华丽得让人留恋，而学习它需要对js object有一定理解，还要懂得去查手册，初学者难免会有点障碍。

它们两个刚好长短互补，以后因地制宜吧。