我想向 App SDK 2 自定义应用程序添加打印功能,该应用程序在齿轮图标下显示网格和打印选项,但打印页面为空。您有打印网格的应用程序示例吗?
问问题
214 次
2 回答
0
此处找到的网格应用示例已修改为包含打印功能:
<!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>
于 2013-07-24T00:42:10.520 回答
0
FWIW,我们也可能会为 2.0 SDK GA 的打印应用程序创建一个插件,其中包括上述答案中的很多复杂性(_onButtonPressed、_injectContent 和 _injectCSS)。我们已经为核心产品中的页面提供了此功能 - 只需对其稍作修改和扩展,即可更普遍地与 SDK 2 应用程序一起使用。
于 2013-07-24T12:06:54.313 回答