ActiveReports与extjs 框架的集成

登录

功能介绍：
ExtJS是一个Javascript库，功能强大，界面美观，可以使用Ajax, DHTML，DOM等技术开发网络应用程序。相信大家对Ext的基本功能已经了解，本贴主要讲述了如何将ActiveReports与Ext框架集成。使得开发项目即具有ext的优点，又具有ActiveReports强大的报表功能。

源码下载：

开发环境：

Visual Studio 2012 +ActiveReports 10 SP1+Web程序（如果不是此版本，可通过VS 中的工具-》转换为ActiveReports10 一键转化）

实现步骤：
1. 新建Web项目
2. 新添加HTML页面
3. 引入所有需要的脚本和资源文件

4. 新建RDL报表文件
右键添加新建项，添加报表：

5. 打开Index.html 页面，添加脚本引用：

<script src="AR_Res/Scripts/jquery-1.10.2.js"></script>
<script src="AR_Res/Scripts/bootstrap-3.0.0.js"></script>
<script src="AR_Res/Scripts/knockout-2.3.0.js"></script>
<script src="AR_Res/Scripts/GrapeCity.ActiveReports.Viewer.Html.js"></script>

复制代码

6. 使用Ext初始化页面

Ext.create('Ext.panel.Panel', {
title: 'Hello ActiveReports',
width: '80%',
height: 800,
border: true,
html: '<div id="viewerContainer"></div>',
dockedItems: [
{
xtype: 'toolbar',
name: 'gridToolBar',
dock: 'top',
border: false,
items: [ {
text: 'BillingInvoice.rdlx', handler: function (button) {
LoadReport(button);
}
}, {
text: 'Invoice.rpx', handler: function (button) {
LoadReport(button);
}
}, {
text: 'MoviesReport.rdlx', handler: function (button) {
LoadReport(button);
}
}, {
text: 'OilProducingCountries.rdlx', handler: function (button) {
LoadReport(button);
}
}
]
}
],

复制代码

7. 初始化HtmlViewer

Ext.onReady(function () {
function LoadReport(button) {
var id="Reports/"+ button.text;
var viewer = GrapeCity.ActiveReports.Viewer({
report: {
id:id
},
element: '#viewerContainer',
reportService: {
url: 'Reports/ActiveReports.ReportService.asmx'
},
uiType: 'desktop',
localeUri: 'AR_Res/Scripts/i18n/Localeuri.txt'
});
};

复制代码

		自动登录	找回密码
密码			立即注册

ActiveReports与extjs 框架的集成

本帖子中包含更多资源

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄