Question

我正在创建一个报告系统，我的打印功能有点麻烦。

我的计划是在index.html

中的body元素中放置一个div

<div class="print" id="printcontainer"></div>

使用以下css

#printcontainer{
    z-index: -50;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;  
}

然后在打印上我将在我的printcontainer中呈现所有报告面板：

for (var reportCfg in reports) {

    reportCfg.renderTo = 'printcontainer';

    createReportPanel(reportCfg);
}

到目前为止一切顺利。如果浏览器窗口足够大，一切正常。但是在小屏幕上或者如果您使浏览器窗口变小，则面板不会变得足够大并且报告会被裁剪。它只渲染body元素的宽度。这是浏览器窗口的大小。

我知道我可以在reportCfg中添加一个宽度（所以我的面板有一个固定的宽度）。问题是这些报告根据列的不同可能有不同的宽度。

是否有解决方案我可以渲染它们比体宽大？

现在我想出了下面的黑客，虽然我对它不太满意。我正在覆盖报表面板的afterRender fn，然后检查网格标题的滚动宽度是否大于面板的宽度。

afterRender: function() {
    this.callParent(arguments);

    //hack for printing page so panel gets rendered big enough
    if (this is panel for printing) {
        Ext.resumeLayouts(true);
        var header = this.down('[id^="gridpanel"] [id^="headercontainer"]');
        if (header && header.el.dom.scrollWidth > this.getWidth()) {
            this.setWidth(header.el.dom.scrollWidth);
        }               
    }        
},

有没有更好的解决方案来完成这样的事情？ Imo必须有更好的解决方案。

如果您需要更多信息，请不要犹豫。

ExtJS 4.2渲染组件比body更大，以便打印

0 个答案: