ExtJs 实现首页定制

利用ExtJs 的portal 是可以实现首页定制的！在这里先介绍一下思路，后续补充代码！

我的首页定制里包括应用块的管理，各个应用块的随意拖拽，关闭，显示，保存。

因为应用块是可以管理维护的，比如我可以自己增加一个应用块叫通告，在增加一个叫软件园地等。所以设计了应用块表，存的是这些应用块的名字。每个应用块都有自己的数据，这些数据要有一张对应的表--信息表，与应用块表多对一。首页经过拖拽和增加减少应用块后保存，应保存到数据库中，所以要有一个保存用户首页设置的表--首页设置表。好了，万事俱备，只欠东风。假设我们要在首页分成左右两部分。

 

要实现首页定制，主要有以下几个方面：

1. 理解portal，通过官方例子，了解到在portalPanel中通过items配置的组件其实是portalColumn，在这里有两个，也就是上面说的左右两部分，而每个portalColumn中通过items配置的组件是portalet，每个portalet就是相应的每个应用块。
2. 当在首页拖拽应用块也就是portalet的时候，如何记录这个首页是什么样子的？ 其实很简单，首先你要拿到每个portalColumn，假设我拿到左边的portalColumn对象，那么就可以得到他的items，而他的items是一个数组，里面就是每个应用块，循环portalColumn其实就可以得到每个portalet的title和id。将每个portalet的titile和ID拼成一个对象，也就是每个portalColumn拼成一个有portalet对象组成的json数组保存到后台首页设置表中。
3. 如何实现关闭应用块后，还能再次设置显示出来，勾选checkbox显示应用块，取消勾选关闭应用块？这个也不难，写一个窗口，然后从后台查询应用块表，得到所有的应用块，也就得到所有的应用块的ID和名称，（可以用json）得到以后将每个应用创建一个checkbox，每个应用的id加上一个_box字符串作为一个checkbox的id，，每个应用块的名称作为checkbox的值。然后把这些checkbox添加到窗口中。为每个checkbox添加事件勾选事件，当勾选时，创建一个portalet，checkbox的id截去_box字符串（也就是应用块ID）作为portalet，checkbox的值作为portalet的title。最后将这些portalet添加到对应的portalColumn中，应用就能显示在对应的portalColumn中；当勾选取消时，先拿到这个checkbox的id，截去_box，得到对应的portalet的ID，也就能拿到portalet对象，最后从portalColumn中remove掉就OK了。
4. 如何显示上次保存的首页？ 看到第2步了么？从首页设置表中得到json字符串，然后转换成对象，定义一个portalet对象，把拿到的ID作为portalet的ID，title作为portalet对象的title。再把这些portalet添加到portalColumn。那么Extjs会自动显示出来相应的应用块。
5. 好吧，上面可能你看着有点晕，让我来从头捋顺一下：刚开始首页什么都没有，因为我们要查找首页设置表，看看用户有没有设置首页，刚开始肯定没有，所以查到结果是空的，那么首页也就是空的（为什么呢？接着往下看先，呵呵）当你打开设置窗口时，从后台查询出应用块，根据ID和名称，创建checkbox对象，并且将这些对象add进窗口中。为每个checkbox添加事件，当勾选时，根据checkbox的ID和值创建portalet对象，并将这些对象add进portalColumn中，页面就会显示刚刚勾选的应用；当勾选取消时，根据checkbox的ID得到portalet的ID，进而的到potalet对象，从portalColumn移除它。现在你在首页看到可能已经有一些应用块了。好，现在移动它，拖拽它，然后点击保存，这时我们通过循环portalColumn去得到portalet，然后把portalet的ID，title封装成json字符串，保存到首页设置表，当用户下一次进入的时候，再重新查找首页设置表，发现有了记录，好，拿出来其中的json串，根据里面的ID和title构建portalet对象，并把这些对象添加到portalColumn中，上次保存的首页就显示出来了。接下来又是上面的循环了。不知道你明不明白。。。。
6. 有几个注意的地方，当打开设置窗口时应先获取portalColumn中portalet，然后判断，对应的checkbox是否应该勾选上；为什么checkbox的ID用应用的ID+_box，portalet的ID用应用ID？因为首先应用ID不重复，其次，怎样实现勾选上就显示应用，取消勾选就关闭应用，靠的就是这个应用ID，使得它们之间有了一定的联系。

大概就是这样了，具体代码下次有机会贴出。