如何在打印窗口中的div之后显示分页符？

Question

我目前正在使用ExtJs 4将数据放入带有边框的自定义组件中。我希望页面上有四个组件，之后会有分页符。现在我正在使用这个css：

@media print {
    .app .pb {
        page-break-after: always;
        clear: both;
    }
}

我有一些javascript，在每4张卡片之后添加一个div pb类：

if (index % 4 === 3) {
    this.down('#cards').add({
        xtype: 'component',
        html: '<div class="pb"></div>'
    });
}

我知道css行clear:both;正在运行，但page-break-after: always;似乎永远无法正常工作。我看过这些问题：

1. Google Chrome printing page breaks
2. Css Printing: Avoiding cut in half divs between pages

但到目前为止，这些解决方案对我没用。我想这可能是因为Extjs每个组件都有一个嵌套的div系统？以下是div结构的屏幕截图：



正如您所看到的，具有班级pb的div位于正确的位置 - 每3张牌之后。那么为什么分页不起作用？

以下是打印页面中正在剪切的组件的图片：



非常感谢任何帮助！

编辑：以下是一些应该有帮助的相关javascript和css：

在我的js文件的开头：

this.add({
    xtype: 'container',
    itemId: 'cards'
});

将每条记录添加到卡片容器中：[card xtype只是每条记录的模板html]

Ext.Array.each(records, function(record, index) {
    this.down('#cards').add({
        xtype: 'card',
        data: record.data
    });

    if (index%4 === 3) {
        this.down('#cards').add({
            xtype: 'component',
            html: '<div class="pb"></div>'
        });
    }
}, this);

每条记录的Css：

.app .record {
    background-color: #fff;
    border: 2px solid #000;
    float: left;
    height: 3.2in;
    margin: 0.1in 0.1in 0.1in 0.1in;
    position: relative;
    overflow: hidden;
    width: 4.3in;
}

注意：此代码适用于Firefox，但不适用于Chrome。

Answer 1

使用Ext 4和我们的结构获取分页符的关键是在打印时向页面添加css属性：

.print-page .app {
    overflow: hidden !important;
}

我们认为这是必要的，因为Ext会自动创建div的结构。