ext引入html页面

前言

今天在工作的时候需要做一个三方确认表 我们前端用的框架是extjs 但是三方确认表需要打印必须是ext里边嵌套一个html。下面来说说是怎么实现的。

第一步在win里边定义html：""

如下

Ext.define('Sgai.view.prod.hrProdMeterConfirm.HrProdMeterConfirmWin',
{
    extend:'Ext.window.Window',
    alias:'widget.hrProdMeterConfirmWindow',
    
    controller:'hrProdMeterConfirmWinCtrl',

    title:'三方确认表',
    resizable:false,
    closable:true,
    layout:'fit',
    plain:true,
    modal:true,
    constrainHeader:true,
    width:630,
	height:500,
	
    listeners:{
	},
	items:[
		{
			xtype:'hidden',
			name: 'version',
			value:'1',
			reference:'version'
		},
		{
			xtype:'hidden',
			name: 'sid',
			reference:'sid'
		}
	],
	html:"",
	buttons: [
		'->', 
		{
		    text: '提交',
		    handler:'hrProdMeterConfirmWinSubmit',
		    formBind:true
		},
		{
		    text: '关闭',
		    handler:'hrProdMeterConfirmWinClose'
		}
    ]
});

第二找到queryform定义的按钮

获取到变量

anniu:function(btn, evt) {
    var me = this;
	var winHandle;
	var grid = this.lookupReference('hrProdMeterConfirmListGrid');
	var selected =grid.getSelectionModel();
	//获取参数信息
	var meterName  = selected.getSelection()[0].data.meterName;
	var meterNo = selected.getSelection()[0].data.meterNo;
	if (selected.getSelection().length==1) {	
    	if (!winHandle) {
    		winHandle = Ext.create('Sgai.view.prod.hrProdMeterConfirm.HrProdMeterConfirmWin',
    							   {operate:btn.reference,     //operate  定义的内容  btn.reference  按钮的别名
    							   	ctrl:me
    							   });
    	} 
		/*var form = winHandle.lookupReference('hrProdMeterConfirmGzEditForm');
		form.loadRecord(selected.getSelection()[0]);*/
    	//console.log(winHandle.html.context);
    	winHandle.lookupReference('sid').setValue(sid);
    	winHandle.lookupReference('version').setValue(version);
    	//引入的  table 布局
    	var hh = "<table style='border:1px solid gray;width:580px;'>"+
        "<tr>                                                                                                                                    "+
        "<td style='width:188px;'><img src='resources/images/hr/sg_icon.png'/></td>                                                                              "+
        "<td style='text-align:center;width:392px;'>	                                                                                        "+
        "<table>                                                                                                                         "+
        "<tr>                                                                                                                        "+
        "<td><span id='qrd_confirm_name'>首钢水城钢铁（集团）有限责任公司</span></td>	                                        "+
    "				</tr>                                                                                                                       "+
    "				<tr>                                                                                                                        "+
    "					<td>钢材计量结果通知单</td>                                                                                            "+
    "				</tr>                                                                                                                       "+
    "			</table>		                                                                                                                "+
    "		</td>                                                                                                                               "+
    "	</tr>                                                                                                                                   "+
    "	<tr>                                                                                                                                    "+
    "		<td colspan='2'>                                                                                                                    "+
    "			<table style='width:580px;border-collapse:collapse;'>                                                                           "+
    "				<tr>                                                                                                                        "+
    "					<td style='width:400px;border-collapse:collapse;'></td>                                                                 "+
    "					<td style='width:180px;border-collapse:collapse;'>票号："+ticketNo+"</td>                                                     "+
    "				</tr>                                                                                                                       "+
    "			</table>                                                                                                                        "+
    "		</td>                                                                                                                               "+
    "	</tr>                                                                                                                                   "+
    "	<tr>                                                                                                                                    "+
    "		<td style='text-align:left;'>计量衡名称："+meterNo+"</td>                                                                               "+
    "		<td style='text-align:right;'>计量时间："+proDt+"-班时："+shiftNo+"</td>                                                                                "+
    "	</tr>                                                                                                                                   "+
    "	<tr>                                                                                                                                    "+
    "		<td colspan='2'>                                                                                                                    "+
    "			<table style='width:580px;border-collapse:collapse;'>                                                                           "+
    "				<tr>                                                                                                                        "+
    "					<td style='border:1px solid gray;text-align:center;height:30px;'>钢号</td>                                              "+
    "					<td style='border:1px solid gray;text-align:center;'>"+labelNumber+"</td>                                                       "+
    "					<td style='border:1px solid gray;text-align:center;'>规格</td>                                                          "+
    "					<td style='border:1px solid gray;text-align:center;'>"+matSize+"</td>                                                       "+
    "					<td style='border:1px solid gray;text-align:center;'>品名</td>                                                          "+
    "					<td style='border:1px solid gray;text-align:center;'>"+proName+"</td>                                                        "+
    "				</tr>                                                                                                                       "+
    "				<tr>                                                                                                                        "+
    "					<td style='border:1px solid gray;text-align:center;'>当班计量</br>编号区域</td>                                        "+
    "					<td colspan='3' style='border:1px solid gray;text-align:center;'>"+startMatId+"~"+endMatId+"</td>                         "+
    "					<td colspan='2' rowspan='2' style='border:1px solid gray;text-align:center;'><img src='resources/images/hr/sg_icon.png'/></td>              "+
    "					                                                                                                                        "+
    "				</tr>                                                                                                                       "+
    "				<tr>                                                                                                                        "+
    "					<td style='border:1px solid gray;text-align:center;height:30px;'>当班合计</br>总重量（千克）</td>                      "+
    "					<td colspan='3' style='border:1px solid gray;text-align:center;'>"+actualWeight+" kg</td>                                          "+
    "				</tr>                                                                                                                       "+
    "				<tr>                                                                                                                        "+
    "					<td style='border:1px solid gray;text-align:center;height:30px;'>当班合计</br>总捆数</td>                              "+
    "					<td colspan='3' style='border:1px solid gray;text-align:center;'>"+branch+" 捆</td>                                             "+
    "					<td style='border:1px solid gray;text-align:center;'>计量员</td>                                                        "+
    "					<td style='border:1px solid gray;text-align:center;'>"+meterName+"</td>                                                              "+
    "				</tr>                                                                                                                       "+
    "				<tr>                                                                                                                        "+
    "					<td colspan='6' style='text-align:center;width:580px;'>	                                                                "+
    "						<table style='width:580px;border-collapse:collapse;'>                                                               "+
    "							<tr>                                                                                                            "+
    "								<td style='text-align:center;width:190px;height:60px;'>智能应用事业部</br>确认人："+confirmNameZn+"</td>                    "+
    "								<td style='text-align:center;width:190px;height:60px;'>轧钢事业部</br>确认人："+confirmNameGz+"</td>                        "+
    "								<td style='text-align:center;width:190px;height:60px;'>销售公司</br>确认人："+confirmNameXs+"</td>	                        "+
    "							</tr>                                                                                                           "+
    "						</table>		                                                                                                    "+
    "					</td>                                                                                                                   "+
    "				</tr>                                                                                                                       "+
    "			</table>	                                                                                                                    "+
    "		</td>                                                                                                                               "+
    "	</tr>                                                                                                                                   "+
    "</table>";
    	//  win 里边定义的 html  这边将hh引入
    	winHandle.html=hh;
    	//Ext.getCmp('meterNo').innerHTML='aaaaaaaaaaaa';
		winHandle.show();
	} else {
		Sgai.util.Util.showTipMsg('请选择一条要修改的记录!');
		return;
	}   	
	}

这样我们就完成了嵌套