我目前正在使用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;
似乎永远无法正常工作。我看过这些问题:
但到目前为止,这些解决方案对我没用。我想这可能是因为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。
答案 0 :(得分:0)
使用Ext 4和我们的结构获取分页符的关键是在打印时向页面添加css属性:
.print-page .app {
overflow: hidden !important;
}
我们认为这是必要的,因为Ext会自动创建div的结构。