把Fusioncharts封装成Ext组件的思路
Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭。
一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里
然后Ext的panel组件使用contentEl把盛图的div放进来.这样做虽然可以,但是经常会出现一些问题.
现在发现的问题:
1.同一个图不能更换swf。
2.使用选项卡时,没渲染过的图不能更新,必须挨个跳一遍。
3.对图形更新时,由于使用的setDataUrl(),参数是get方式传递,如果参数过多会有问题。
4.每个图还需要写放图的div,很麻烦。
5.不能像Ext组件一样随意布局和调整属性。
6.等等。
考虑这些缺点,如果把fusioncharts封装成ext的一种panel组件,
利用baseParams收集参数,可通过ajax-post提交向后台请求xml,
调用fusioncharts自己的setDataXML()对图形进行显示。
对于选项卡必须挨个跳一遍的问题,由于自己可以判断panel是否渲染过,可以选择先把xml数据存放在一个临时的属性里,
渲染时再把最新的xml拿出来即可。
对于动态换图形swf,由于一个panel对应一个图,swf应该只是panel的一个属性,每次panel渲染时会根据swf属性创建图形。
最重要的是,作为一个Ext-panel,放到弹出窗口,提示窗,选项卡里肯定都行,布局起来就非常方便了。
只要放到items:[]里面就能用,如果用xtype就更方便了
把Fusioncharts封装成Ext组件的思路相关推荐
- 把Fusioncharts封装成Ext组件的思路 及实现
Fusioncharts和Ext都是强大的前台展现技术,虽然可以一起使用,但总感觉很别扭. 一般的做法是先new Fusioncharts()创建一个图,并且使用render()渲染到一个div里 然 ...
- monaco-editor基本使用以及monaco-editor封装成vue组件
文章目录 一.monaco-editor基本使用 二.monaco-editor封装成vue组件 一.monaco-editor基本使用 以vue2项目为例 安装依赖 npm i monaco-edi ...
- android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
- Vue使用wangEditor 封装成独立组件实现富文本编辑器
1.使用npm安装: npm install wangeditor 2.将编辑器封装一个组件,创建editor.vue组件: <template><div id="edit ...
- vue中怎样实现弹出层动画效果?由上而下渐渐显示---封装成复用组件
子组件: <template><div class="home"><!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --& ...
- vue 封装dialog_element-dialog封装成子组件
移除 {{Edit}} import UserEditfrom "./UserEdit-dialog.vue"; import updatefrom './Update.vue'e ...
- 封装element分页组件
项目场景: 将 element-ui 中分页封装成公共组件 描述: admin后台中会有很多的表格以及分页的应用,所以考虑将分页分装成公共组件 <!--封装组件 vue页面--> < ...
- 纯生js ajax,纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
- react antd confirm content list_React造轮系列:对话框组件 - Dialog 思路
React造轮系列:对话框组件 - Dialog 思路 对话框一般是我们点击按钮弹出的这么一个东西,主要类型有 Alter, Confirm 及 Modal, Modal 一般带有半透明的黑色背景.当 ...
最新文章
- 【Storage】Ubuntu LVM 安装配置
- Centos7 修改SSH 端口
- 计算机网络·通俗理解RIP协议(距离向量算法计算)
- Hadoop新手篇:hadoop入门基础教程
- Modern UI for WPF 开源项目(5):定义logo
- 图像处理——DCT变换的学习笔记
- some blogs for xna 3d game for windows phone!
- Four-tuples 山东省赛F题
- 201632位matlab下载_Matlab 2016a下载
- 2SB1184TLQ三极管
- Stacer ---- Linux系统优化和监测工具
- 【python】2022年618一起抢优惠券
- win10显示WiFi已连接但无法访问互联网?
- 单端测序与双末端测序问题
- vba 添加outlook 签名_如何在Office 365中为VBA宏创建自签名数字证书
- 从前端到管理者,小i机器人成长体验如何?
- 1米6农村放牛娃的奋斗历程:从同济、港理工,到清华、伯克利大学!
- 二级页表如何节省内存
- 上市公司广告宣传推广费-含沪深A股主板、中小企业板等(2011-2020年)
- 这8大技术趋势,将塑造未来科技行业格局
热门文章
- html点击展开盒子变大,JS实现点击按钮控制Div变宽、增高及调整背景色的方法
- RS232 RS485 串口 电平标准
- 根据公式计算圆周率Π的值
- 小米电视盒服务器维护,告别小白!小米电视/盒子不为人知的设置技巧
- 2022年5月5日,第28天
- 维骨力 Vinteail-S Capsules
- linux下用户和组的管理,linux用户和组管理常见命令
- Momenta实习生第一次面试经历
- UE5 官方案例Lyra 全特性详解 13.背包系统Inventory System 2
- micropython中文社区 microbit_microbit如何烧录micropython固件