本周工作总结2011-09-03

本周在公司开发了两个小的应用程序，其一是解决部门每天加班人数统计以及月加班情况分析的小程序，其二是控制系统首页portal显示版块及次序的应用。这里做些总结的主要原因是记录下自己刚开始接触软件设计的思路及期望以后能在此基础上做的更好。

程序一：加班人数统计(涉及公司信息，后续补上)

程序二：首页版块配置

系统提供多个可供在首页上显示的版块，每个版块可以为一个或多个用户角色服务。系统管理员统一设置每个角色可以使用版块的权限及版块直接的次序，系统同时提供给系统管理员保存版块布局的功能。

 

效果图：

 

表结构：

 1、T_SY_ROLERELBK 角色版块对应表

字段	类型	说明
WID		业务主键
XT_ROLE		角色名称
BK_WID		版块WID
CX		次序

 

2、版块列表T_SY_BK

字段	类型	说明
WID
CNAME		版块名称

 

3、布局表T_SY_LAYOUT

字段	类型	说明
WID
CNAME		布局名称

 

4、布局版块列表T_SY_LAYOUT_BK

字段	类型	说明
WID
LAYOUT_WID		布局WID
BK_WID		版块WID
CX		次序

 

说明：由外键可知，这里存在几种关系：角色和版块之间是1:n；布局和版块之间是n:n,划分出对应关系就简单了。

 

实现细节：

1、聊聊EXT的开源协议

    由于功能是用Ext来实现的，开发的时候我使用的类库是Ext3.1.1，在迁移至系统时出现了一些问题。问题一：我在Panel面板中这样定义一个tbar， tbar: {id: 'createTbarId'},查阅了Ext的API也发现tbar属性是可以定义为Array或是object的；问题二：在切换角色的时候我需要将中部面板中所有的portal先清理掉再重新添加新的portal，我使用的是Panel中的removeAll()方法移除Panel容器中的所有组件。结果查阅Ext2.0API竟然没有此方法。此外在网上查了一下，Ext在2.1.0以后就将开源协议由原来的LGPL改为了GPL，说白了LGPL允许用户私有化产品，而GPL不允许用户私有化产品，必须公用。再说直接点既然Ext支持GPL和商业协议，如果你的产品是用于商业用途那对不起，请你购买。对于一直支持Ext社区发展的同学确实心里拔凉拔凉的。。。

2、布局方面

     页面使用了三种布局方式：BorderLayout、ColumnLayout、AnchorLayout，虽然没有用过所有的布局方式，但是这三种还是比较常用的，并且能满足于一般应用了。据说Ext有11中布局方式。首先用border布局将页面划分为了west和center两个区域。这里需要说明一下的是：north、south区域的宽是整个容器的宽度，所以不要指定其宽度，指定也没有作用；west、east区域的高度是整个容器的高度减去north、south的高度；center区域不用指定宽高，根据其他四个区域就可以将其计算出来。在西部的Panel中使用了anchor布局方式指定其anchor：'100% 50%'即容器占用整个西部面板100%宽度和50%的高度。中间区域使用了一个面板容器，容器中存放xtype：portal类型的组件。对于portal我们设定其为column布局，只需要指定其columnWidth:.5即可。

3、不是问题的问题

由于Ext2.0版本不支持Panel组件上面的removeAll()方法，导致我需要自己手动的实现删除。也就意味着本来一行代码：Ext.getCmp('index:column1').removeAll()可以搞定的事情需要分解成如下方式：

var col1 = Ext.getCmp('index:column1');
for(var seq=0; seq<col1.items.length; seq++){
     var portal = col1.items.item(col1.items.keys(seq));
     portal.ownerCt.remove(portal,true);
     seq --;
}

 4、动态添加工具条

在页面组件全部渲染完毕后，开始渲染工具条，需要从后台数据库中将已经保存好的布局方式加载上来显示在tbar中，在回调方法里我使用了Ext.getCmp('createTbarId').add({});循环的创建工具条按钮。

注意：createTbarId是上面定义好的，如果在3.0以上版本中可以直接定义对象，如果是以下版本就需要定义为数组或直接new Ext.Toolbar({id: 'createTbarId',height: 30})

此外，添加下拉菜单也蛮有意思的：

Ext.getCmp('createTbarId').add(new Ext.SplitButton({
      text: '操作',
      arrowTooltip: '更多',
      menu: new Ext.menu.Menu({
           items: [{
                  id: '',
                  text:'',
                  iconCls: '',
                  handler: function(item){
                         //。。。
                  }
           }]
      })
}));