Possibilité d'impression dans App SDK 2

Je souhaite ajouter une fonctionnalité d'impression à une application personnalisée App SDK 2 qui affiche une grille et une option Imprimer sous l'icône en forme de roue dentée, mais la page d'impression est vide. Avez-vous un exemple d'application qui imprime une grille?Possibilité d'impression dans App SDK 2

Source

2013-07-24 Matt Harutun

Un exemple d'application de la grille trouvée here a été modifié pour inclure la capacité d'impression:

<!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>

Source

2013-07-24 00:42:10 nickm

FWIW, Nous allons aussi probablement créer un plug-in pour les applications d'impression pour le SDK 2.0 GA qui comprend une grande partie de la complexité la réponse ci-dessus (_onButtonPressed, _injectContent et _injectCSS). Nous l'avons déjà pour les pages du produit principal - il suffit de le modifier légèrement et de l'étendre pour travailler plus généralement avec les applications SDK 2.

Source

2013-07-24 12:06:54

Possibilité d'impression dans App SDK 2

Répondre

Questions connexes