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

 

源码下载:

AR10 By Extjs Demo.zip

 

 

您在使用产品过程中有任何疑问,可以登录官方产品技术社区和经验丰富的技术工程师、ActiveReports开发人员交流:了解更多

了解ActiveReports产品更多特性:

/developer/activereports

下载产品体验产品功能:

/download/?pid=16