Extjs Window用法详解 2 打印具体应用

Extjs 中的按钮元素

{
xtype: ‘buttongroup‘,
title: ‘打印‘,
items: [
me.tsbDel = Ext.create(‘Ext.button.Button‘, {
text: ‘打印123‘,
iconCls: ‘tool_print‘,
scale: ‘large‘,
iconAlign: ‘top‘,
handler: function () {
var window = me.createWindow(‘www.view.report.vwwprint‘, {

params: {
oid: record.data.id,
}

});
}
}), ]
},

Extjs弹窗使用的第一种打印

Ext.define(‘www.view.report.vwwprint‘, {
extend: ‘www.controls.WinBase‘,
width: 800,
height: 600,
autoShow: true,
modal: true,
stateful: false,
maximizable: false,
minimizable: false,
resizable: false,
layout: ‘fit‘,
title: ‘打印的内容‘,
iconCls: ‘icon_taskboxlist‘,
initComponent: function () {
var me = this;
me.items = [
{
xtype: ‘panel‘,
border: 0,
html: ‘<iframe id="ifPrint" name="ifPrint" src="./D/Box/PrintReport/?‘ + Ext.Object.toQueryString(me.params) + ‘" width="100%" height="540" frameborder="0" scrolling="auto"></iframe>‘
}];
me.buttons = [
me.btnOK = Ext.create(‘Ext.button.Button‘, {
text: ‘打印‘,
handler: function () {
var iframe = document.getElementById(‘ifPrint‘);
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
}),
me.btnCancel = Ext.create(‘Ext.button.Button‘, {
text: ‘关闭‘,
handler: function () {
me.close();
}
})];

me.callParent(arguments);
}

});

Extjs弹窗使用的第二种打印

1、html文件

<div id="content">
    <h2>欢迎访问起飞网Extjs教程</h2>
    <p>
        更多Extjs教程,请访问<a href="http://www.qeefee.com/zt-extjs">http://www.qeefee.com/zt-extjs</a>
    </p>
</div>2、
//创建window
var win = Ext.create("Ext.window.Window", {
    id: "myWin",
    title: "示例窗口",
    width: 500,
    height: 300,
    layout: "fit",
    autoShow: true,
    contentEl: "content",
items: [
    buttons: [
        { xtype: "button", text: "确定", handler: function ()             //{             //this.up("window").close();            //}          var iframe = document.getElementById(‘ifPrint‘);          iframe.contentWindow.focus();          iframe.contentWindow.print();         },
        { xtype: "button", text: "取消", handler: function () { this.up("window").close(); } }
    ]
});

原文地址:https://www.cnblogs.com/1175429393wljblog/p/9178921.html

时间: 2024-10-10 05:16:40

Extjs Window用法详解 2 打印具体应用的相关文章

Extjs Window用法详解

今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 创建Extjs Window 创建Extjs Window的代码如下: //创建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500

Extjs Form用法详解(适用于Extjs5)

Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/article/extjs-form-in-detail,转载请注明出处!推荐更多Extjs教

Extjs Form用法详解

Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/article/extjs-form-in-detail,转载请注明出处!推荐更多Extjs教

Extjs GridPael用法详解

Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel的详细用法. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/

Extjs GridPanel用法详解

Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel的详细用法. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/

window.onload用法详解

window.onload用法详解: 网页中的javascript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的低端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成. 二.通过window.onload来执行脚本代码. 第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window.onload方式就是一个更好的选择.window.onloa

Vue1.0用法详解

Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 4 5 6 7 8 9 10 11 <div id="app"> {{message}} <input v-model="message"> </div> new Vue({ ele: '#app', data: { message:

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

python处理word文件:win32com用法详解

目标:用python处理doc文件 方法:引入win32com模块 ************************************************************************** 一.安装 ************************************************************************** 首先要先下载安装win32com模块(起先在linux下装不成功,后在windows下面成功了...) 下载地址:http