使用ActiveReports与extjs 框架的集成

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

开发环境

Visual Studio 2012 +ActiveReports 10 SP1+Web程序

实现步骤

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'
                });
            };