New Timeline的Toolbar样式设计

最近在做新版的Timeline，Toolbar【Menu】的功能基本完成，因此把截图拿出来与各位博友分享一下。

新版Timeline【HTML版本】主页面：

这次主要讲解一下Toolbar【Menu】的功能。

1、Toolbar的主要功能按钮：

这块是用Ext的Toolbar实现的，之前用jQuery.toolbar.js实现，但是在实现Check选择菜单和点击后悬停菜单方面，jQuery.toolbar.js实现起来比较困难，需要自己修改js。

2、EventList效果：

此模块主要应用的Ext的Tree来实现的，虽然暂时没有树状结构但是便于以后分类的扩展，此块的Tree的panel要关联到menu上，这块用了一点小技巧，具体方法是：正常添加Event list的menu，然后用menu的item的html属性添加一个treeGrid的div【设置固定的宽度和高度】，然后添加单击事件，在单击事件中获取业务数据，将业务数据构建成treeStore格式，然后添加到Tree.panel上，将tree.panel绑定到html中的div【renderTo】就可以了，另外提醒一下，就是不用每次点击都做这些操作，需要一个变量记录一下，如果第二次或者之后点击，不需要取数据再load了，只需要显示原有的Event list就可以了。

3、Time Scale：

此块重要是动态修改Timeline模式的时候需要动态修改icon_ok图标，这块难度不大。

4、Legend：

此块主要是menu实现了既包含图标还有checkbox属性，其实这是Ext的toolbar本身就支持的，只需要正确配置其属性就好了。

5、More Infomation

 

主要的功能就介绍这些了，如果有需要深入交流的请给我留言。