实现通用的CRUD之三——仅有RIA还不够

B/S三层架构在安全性、易部署方面有天然的优势，但是HTML简陋的form组件却难与丰富的桌面组件相提并论。于是RIA应运而生。

RIA的出现使得在B/S应用上实现传统C/S应用的复杂界面成为可能。ExtJS和flex都是奔着这一主题产生的。ExtJS采用开放的DOM模型，更为我所欣赏。

ExtJS实现了一套类似传统桌面组件库的，采用OOP和事件机制，具备可扩展性的组件集合。曾经编写桌面应用的朋友，看它的examples和API文档，可能会倍感亲切。但是Extjs也存在应用禁区：它的destory并不能解决IE下固有的内存泄漏问题。IE的内存泄漏是DOM元素与javascript存在未能释放的引用导致的，要杜绝这种引用存在现实上的困难。那么，有没有更简单易行的方法呢？

 

1. 权衡再三，我们采用界面复用来绕开这个难题。基本思路是：
2. 当需要建立一个界面（常见的grid或者form）时，首先查看索引是否已经在内存中缓存了同样的界面。
3. 如果存在，则不再创建新的界面，而只是在旧的界面上进行数据刷新，并让它可见。
4. 如果不存在，则建立新界面，并对它建立索引。
5. 当关闭界面时，代替destory以hide，即仅仅是隐藏它而已。

采用上述规则之后，浏览器消耗的内存会随着新建立界面而增长，但会有一个上界——即所有可复用界面的最大集合。而不再象反复new->destory那样，少量但不断地消耗内存。

 

另一方面，RIA的编程对于曾经经历桌面界面开发人员可能熟悉，但这样的老程序员恐怕稀有了，有木有一种办法可以使用RIA，但却不需要为RIA的API细节所束缚呢？

有的，同样是上面那个界面复用的思路。但需要满足前提：界面的操作具备一致性。

想想看，对数据库表的CRUD不就是通用的操作么？而这种操作大致可以描述如下：

 

1. 对一个或者多个表进行（联合）检索，允许自定义检索、排序条件。
2. 检索结果分页显示在grid中。
3. 在editorGrid中直接修改、增加、删除数据并保存。
4. 在grid中选中一条，查看详细。
5. 该条数据以tabPanel显示。
6. tabPanel下包含了子表数据。
7. 对子表数据重复以上展示和操作。

实现效果截图如下：

 

排序支持

 

检索支持：

 

 

 

editorGrid直接修改数据