document.Body ComponentQuery

我正在使用一個真棒html2canvas函數，但我有一個noob問題。如何將它從document.body捕獲的字段更改爲特定的面板？總之，我需要將document.body更改爲我想要捕獲的面板，我只是不知道要獲取我想要的面板的代碼。document.Body ComponentQuery

我已經試過Ext.ComponentQuery.query（'＃testPanel'）沒有任何成功。

testButtonClicked: function (btn) { 

    html2canvas(document.body, { 
     onrendered: function (canvas) { 
      new Ext.Window({ 
       title: 'Screenshot', 
       //width: 500, 
       height: 800, 
       resizable: true, 
       autoScroll: true, 
       preventBodyReset: true, 
       html: '<img src="' + canvas.toDataURL("image/png") + '" height="800"/>' 
      }).show(); 
     } 
    });

來源

2014-01-11 JesseRules

你想getEl（）。dom。這是一個獨立的例子（用Ext 4.2.x測試）：

Ext.onReady(function() { 

    Ext.define('Panel', { 
     extend: 'Ext.panel.Panel', 

     frame: true, 
     title: 'Test Panel', 
     width: 300, 
     height: 300, 

     onClick: function() { 
      html2canvas(this.getEl().dom, { 
       onrendered: function (canvas) { 
        new Ext.Window({ 
         title: 'Screenshot', 
         width: 300, 
         height: 300, 
         html: '<img src="' + canvas.toDataURL("image/png") + '"/>' 
        }).show(); 
       } 
      }); 
     }, 


     initComponent: function() { 
      var config = { 
       items: [ 
        { 
         xtype: 'datepicker' 
        }, 
        { 
         xtype: 'button', 
         text: 'CAPTURE THIS PANEL', 
         handler: this.onClick, 
         scope: this 
        } 
       ] 
      }; 

      Ext.apply(this, Ext.apply(this.initialConfig, config)); 
      this.callParent(arguments); 
     } 
    }); 


    var panel = Ext.create('Panel', { 
     renderTo: Ext.getBody() 
    }); 
});

來源

2014-01-11 20:27:55 bhutten

不錯！謝謝。 – JesseRules

html2canvas()似乎需要DOM元素。 Ext.ComponentQuery.query()返回一個匹配元素的數組，所以如果你精確地使用你提供的代碼，它將不起作用，因爲從query()返回的數組顯然不是DOM元素。

所以，如果query()真的返回的東西，你可以使用第一個位置：

Ext.ComponentQuery.query("#testPanel")[0]

或者，因爲你似乎有分配到面板的ID，你可以簡單地使用getCmp（），這將只返回匹配的元素，而不是數組：

Ext.getCmp("testPanel")

來源

2014-01-11 16:06:31 existdissolve

'Ext.ComponentQuery.query'返回組件對象的數組。如果你想獲得組件dom元素，你必須使用'Ext.ComponentQuery.query（「＃testPanel」）[0] .getEl（）。dom'。 'Ext.getCmp（「testPanel」）'返回組件的對象，而不是dom元素。 – Akatum

document.Body ComponentQuery

回答

相關問題