Question

我想将打印功能添加到App SDK 2自定义应用程序，该应用程序在齿轮图标下显示网格和打印选项，但打印页面为空。您是否有打印网格的应用程序示例？

Answer 1

找到的网格应用示例here已修改为包含打印功能：

<!DOCTYPE html>
<html>
<head>
    <title>GridExample</title>

    <script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>

    <script type="text/javascript">
        Rally.onReady(function () {
            Ext.define('CustomApp', {
                extend: 'Rally.app.App',
                componentCls: 'app',

                launch: function() {
                    Rally.data.ModelFactory.getModel({
                        type: 'UserStory',
                        success: function(model) {
                            this.grid = this.add({
                                xtype: 'rallygrid',
                                itemId: 'grid',
                                model: model,
                                columnCfgs: [
                                    'FormattedID',
                                    'Name',
                                    'Owner'
                                ],
                                storeConfig: {
                                    filters: [
                                        {
                                            property: 'ScheduleState',
                                            operator: '=',
                                            value: 'Defined'
                                        }
                                    ]
                                }
                            });
                        },
                        scope: this
                    });
                },
                getOptions: function() {
                    return [
                        {
                            text: 'Print',
                            handler: this._onButtonPressed,
                            scope: this
                        }
                    ];
                },

                _onButtonPressed: function() {
                    options = "toolbar=1,menubar=1,scrollbars=yes,scrolling=yes,resizable=yes,width=1000,height=500";

                    var css = document.getElementsByTagName('style')[0].innerHTML;
                    var title = "User Stories";
                    var printWindow = window.open('', '', options);

                    var doc = printWindow.document;

                    var grid = this.down('#grid');

                    doc.write('<html><head>' + '<style>' + css + '</style><title>' + title + '</title>');
                    doc.write('</head><body class="landscape">');
                    doc.write('<p>My Grid: ' + title + '</p><br />');
                    doc.write(grid.getEl().dom.innerHTML);
                    doc.write('</body></html>');
                    doc.close();

                    this._injectCSS(printWindow);

                    printWindow.print();

                },
                _injectCSS: function(printWindow){
                    //find all the stylesheets on the current page and inject them into the new page
                    Ext.each(Ext.query('link'), function(stylesheet){
                        this._injectContent('', 'link', {
                            rel: 'stylesheet',
                            href: stylesheet.href,
                            type: 'text/css'
                        }, printWindow.document.getElementsByTagName('head')[0], printWindow);
                    }, this);
                },
                _injectContent: function(html, elementType, attributes, container, printWindow){
                    elementType = elementType || 'div';
                    container = container || printWindow.document.getElementsByTagName('body')[0];

                    var element = printWindow.document.createElement(elementType);

                    Ext.Object.each(attributes, function(key, value){
                        if (key === 'class') {
                            element.className = value;
                        } else {
                            element.setAttribute(key, value);
                        }
                    });

                    if(html){
                        element.innerHTML = html;
                    }

                    return container.appendChild(element);
                }
            });

            Rally.launchApp('CustomApp', {
                name:"GridExample"
                //parentRepos:""
            });

        });
    </script>

    <style type="text/css">
        .app {
            /* Add app styles here */
        }
    </style>

</head>
<body></body>
</html>

Answer 2

FWIW，我们也可能会为2.0 SDK GA创建一个打印应用程序的插件，其中包含上述答案中的许多复杂性（_onButtonPressed，_injectContent和_injectCSS）。我们已经将这个用于核心产品中的页面 - 它只需要稍加修改和扩展，以便更普遍地使用SDK 2应用程序。

App SDK 2中的打印功能

2 个答案: