引用Ext的JS及CSS

编辑
  • 文档创建者:印然
  • 浏览次数:5535次
  • 编辑次数:10次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 问题描述

    现有系统使用 Ext 框架,报表集成至现有系统后,默认弹出框样式都是 FineReport 报表中固定的风格,希望报表里面的弹出框使用 Ext 的风格,因此需要自定义弹出框的样式,如下:

    222

    2. 实现思路

    引用 Ext 的 JavaScript 文件,调用Ext的方法弹出窗口,再通过 Ext 的 CSS 样式表,设置弹出窗口的样式。

    3. 解决方案

    3.1 引用 Ext 的 JavaScript 文件与 CSS 样式表

    报表集成到 Ext 系统后,点击菜单服务器>服务器配置>引用 JavaScript,通过相对路径引用 Ext 框架文件 ext-all.js,如这个文件分别位于工程目录%FR_HOME%\webapps\webroot\help\ext-4.2.1.883\,则如下图引用:

    222

    同样在服务器>服务器配置>引用 Css,通过相对路径引用 ext-all.css,如该文件位于工程目录%FR_HOME%\webapps\webroot\help\ext-4.2.1.883\resources\css\,则如下图引用:

    222


    3.2 使用 Ext 弹出框

    在报表设计里面,如果需要弹出框显示内容的,就可直接使用 Ext 弹出方式,在 JavaScript 中直接输入如下代码:

    Ext.MessageBox.alert("FR","这个是Ext风格的窗口");        //第一个参数为弹出框标题,第二个参数为弹出框内容,可根据情况修改

    如下图调用方法:

    222


    3.3 预览报表,展示 Ext 风格

    确定并保存,预览报表,弹出对话框就是 Ext 风格显示了。


    4. 其他情况

    4.1 问题描述

    当在 IE7 或者是 IE8 下预览的时候,展示无效,这是因为 IE 7、8 下动态图表的特殊实现方式(VML),无法直接调用模板引入的ext的 JavaScript 和 CSS。


    4.2 解决思路

    因为 IE7、8 下动态图表的特殊实现方式(VML),无法直接调用模板引入的 Ext,所以需要做一个判断,如果在 IE7,8 下面引用 Ext 的 JavaScript 或者是 CSS,则先获取父窗格再调用 Ext。


    4.3 解决方案

    if (window.isChartIframe) {   window.parent.Ext.MessageBox.alert("FR","这个是Ext风格的窗口");
    } else {
    Ext.MessageBox.alert("FR","这个是Ext风格的窗口");
    }

    如下图调用方法:

    222

    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]