0

App SDK 2 カスタム アプリに印刷機能を追加したいと考えています。このアプリにはグリッドと歯車アイコンの下の [印刷] オプションが表示されますが、印刷ページは空です。グリッドを印刷するアプリの例はありますか?

4

2 に答える 2

0

参考までに、2.0 SDK GA 向けの印刷アプリ用のプラグインも作成する予定です。これには、上記の回答の多くの複雑さが含まれます (_onButtonPressed、_injectContent、および _injectCSS)。これは、コア製品のページ用に既に用意されています。SDK 2 アプリでより一般的に機能するように、わずかに変更および拡張する必要があります。

于 2013-07-24T12:06:54.313 に答える
0

ここにあるグリッド アプリの例は、印刷機能を含めるように変更されています。

<!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>
于 2013-07-24T00:42:10.520 に答える