ActiveReports与extjs 框架的集成
功能介绍：ExtJS是一个Javascript库，功能强大，界面美观，可以使用Ajax, DHTML，DOM等技术开发网络应用程序。相信大家对Ext的基本功能已经了解，本贴主要讲述了如何将ActiveReports与Ext框架集成。使得开发项目即具有ext的优点，又具有ActiveReports强大的报表功能。
源码下载：
开发环境：
Visual Studio 2012 +ActiveReports 10SP1+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'
});
};
页:
[1]