Extjs甘特图的大数据量和性能优化
Extjs甘特图所能支持的数据量,以及界面的渲染和操作性能,是衡量一个甘特图组件是否符合项目需要的重要指标。
为了支持超过万级超大数据量的甘特图,Extjs提供一个数据缓冲视图的解决方案。使用这个方案非常简单,只需要在创建甘特图的时候,加入以下代码。
1. var g = new Sch.gantt.GanttPanel({
2.
3. view : new Sch.gantt.BufferedGanttView({
4. scrollDelay : false
5. }),
6. taskStore : store,
7. dependencyStore : dependencyStore,
8. });
使用个数据缓冲视图的Extjs甘特图能支持10万条以上的数据量。在我们的测试中,内存开销和性能体验都非常好。
皮肤和主题
如果你不想让你的应用千人一面,那么Extjs甘特图提供的“皮肤和主题”功能就非常有必要了。Extjs甘特图提供三种不同风格的皮肤和样式,你也可以在美工的配合下自定义自己的皮肤和主题。
自定义主题1
自定义主题2
自定义主题3
以下的代码展示了通过CSS更改样式的多种方法。点击工具栏按钮更改样式。
1. var g = new Sch.gantt.GanttPanel({
2. ...
3. });
4. handler : function() {
5. g.el.removeClass(['style2', 'style3']).addClass('style1');
6. g.view.refresh();
7. }
别忘记调用view.refresh()来刷新视图。