Ext3在IE11和360浏览器中显示不兼容、排版混乱,但在火狐、谷歌和QQ中显示正常

编程知识 更新时间:2023-05-01 23:14:14
最近在解决Ext在浏览器中兼容性的问题,在网上找了好多方法,比如使用 
use strict
 
还有就是添加特定的<Meta>和删除掉<!DOCTYPE html>这部分的内容等,但都不能解决下面图示所出现的问题,第一次发帖,还望各位知道的大神告诉下我,谢谢各位大神
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/adsfw/taglibs.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>房屋查询</title>

<%@ include file="/adswf/engine/public/meta_wf.jsp"%>
<script type="text/javascript" src="${ctx}/resources/js/easyui/easycore.js"></script>
<script src="${ctx}/bdcdj4/xxcx/js/bdcdycxGrid.js" type="text/javascript"></script>
<script src="${ctx}/adsfw/public/export/excel/clientexcel.js" type="text/javascript"></script>
<script src="${ctx}/bdcdj4/xxcx/js/FwForExcel.js" type="text/javascript"></script>

<script type="text/javascript">
document.οnkeydοwn=function(e){  
        // 兼容FF和IE和Opera 
        var theEvent = e || window.event;  
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
        	summaryGrid.store.load();
        }
    }
var cx_flag = {
	cxFlag:'fwcx'//标识从哪个查询入口进来的,传递给xxcxGrid.js
};

Ext.onReady(function(){
	//查询
	var searchForm = new Ext.FormPanel({
		region: 'north',
		title: ' 房屋查询',
		iconCls: 'icon-xxcx-fwcx',
		labelAlign: 'right',
		height: 160,
		labelWidth: 70,
		frame: true,
		plain: true,
		collapsible: true,
		border: true,
		margins: '1 1 2 1',
		items: [{
			layout: 'column',
			items:[{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					xtype: 'textfield',
					fieldLabel: '权利人姓名',
					name: 'qlr',
					anchor: '95%',
					emptyText:'+,表示与或'
				}]
			},{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					xtype: 'textfield',
					fieldLabel: '身份证',
					name: 'zjh',
					anchor: '95%'
				}]
			}]
		},{
			layout: 'column',
			items:[{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					xtype: 'textfield',
					fieldLabel: '不动产权证号',
					name: 'bdcqzh',
					anchor: '95%',
					emptyText:'+,表示与或'
				}]
			},{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					xtype: 'textfield',
					fieldLabel: '不动产单元号',
					name: 'bdcdyh',
					anchor: '95%'
				}]
			}]
		},{
			layout: 'column',
			items:[{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					 xtype: 'textfield',
					 fieldLabel: '业务号',
					 name: 'ywh',
					 anchor: '95%'
				}]
			},{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					 xtype: 'textfield',
					 fieldLabel: '坐落',
					 name: 'zl',
					 anchor: '95%',
					 emptyText:'+,表示与或'
				}]
			}]
		},{
			layout: 'column',
			items:[{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
					    xtype: 'datefield',
						fieldLabel: '登记开始时间',
						format: 'Y-m-d',
			       	 	name: 'djkssj',
			       	 	id:'kssj',
       					anchor: '95%'
				}]
			},{
				columnWidth: .37,
				layout: 'form',
				labelWidth: 100,
				items: [{
						xtype: 'datefield',
						fieldLabel: '至',
						format: 'Y-m-d',
			       	 	name: 'djjssj',
			       	 	id:'jssj',
       					anchor: '95%',
       					listeners:{
       						'select': function(){
							      var kssj=Ext.getCmp('kssj').value;
							      var dt1 = new Date(kssj);//获取选择的时期对象
							      
		       					  var jssj=Ext.getCmp('jssj').value;
		       					  var dt2 = new Date(jssj);//获取选择的时期对象
		       					  
		       					  value1 = Date.parse(dt1); //Date.parse的处理很关键  
		                          value2 = Date.parse(dt2);
		       					  if(value1 > value2){
		       					  		Ext.getCmp('jssj').setValue('');
		       							Ext.Msg.alert('结果', '结束时间小于开始时间,请重新选择!');
		       					   }
							   } 
       					}
				}]
			},
			{
				columnWidth: .24,
				layout: 'hbox',
				defaults:{margins:'0 5 0 0'},
				items:[{
					xtype: 'button',
					text: ' 查询',
					width: 80,
					iconCls: 'icon-find',
					handler: function(){
						this.summaryGrid.store.load();
					},
					scope: this
				},{
					xtype: 'button',
					text: '清空',
					iconCls: 'icon-bdcdj-clear',
					width: 80,
					handler: function(){
						this.searchForm.form.reset();
						this.summaryGrid.store.load();
					},
					scope: this
				}]
			}]
		}]
	});
	this.searchForm = searchForm;
		
	var summaryGrid = new Ext.ux.grid.XxcxGrid({
		id: 'DZB_SUMMARY_GRID',
		region: 'center',
		margins: '0 1 1 1',
		url: this.ctx+'/bdcdj-xxcx!searchByfw.action',
		keyField: 'id',
		enableHandleTaskBtn: true,
		isSingleSelect:true,//多选框
		pageSize:15,
		isShowPrite:true,//是否显示房屋打印
		structure: [{  
			name: 'id',
			header:'id',
			hidden: true
		},{  
			name: 'djlb',
			header:'djlb',
			hidden: true
		},{  
			name: 'ywh',  
			header: '业务号',
			width: 140
		},{  
			name: 'qlr',  
			header: '权利人',
			width: 150
		},{  
			name: 'zjh',  
			header: '证件号',
			width: 220
		},{
			name: 'zl',  
			header: '坐落',
			width: 360,
			forceFit: true
		},{  
			name: 'bdcqzh',  
			header: '不动产权证号',
			width: 260
		},{  
			name: 'bdcdyh',  
			header: '不动产单元号',
			width: 260
		},{  
			name: 'djsj', 
			header: '登记时间',
			width: 120
		},{  
			name: 'latestZt', 
			header: '抵押、查封、异议、限制情况',
			width: 240
		}]
	});
	this.summaryGrid = summaryGrid;
	
	var viewport = new Ext.Viewport({
		layout: 'border',
		items: [searchForm, summaryGrid]
	});

	var store = summaryGrid.store;
	store.on('beforeload', function(){
		store.baseParams = {
			groupBy: store.groupField ? store.groupField : null,
			qlr:searchForm.form.findField('qlr').getValue(),
			zjh:searchForm.form.findField('zjh').getValue(),
			bdcqzh:searchForm.form.findField('bdcqzh').getValue(),
			bdcdyh:searchForm.form.findField('bdcdyh').getValue(),
			djkssj:searchForm.form.findField('djkssj').getValue(),
			djjssj:searchForm.form.findField('djjssj').getValue(),
			ywh:searchForm.form.findField('ywh').getValue(),
			zl:searchForm.form.findField('zl').getValue()
		};
	}, this);
});
</script>
</head>

<body>
</body>
</html>

如上图是运行的功能代码~



如上图是IE11和360浏览器中功能显示的画面



如上图是火狐、谷歌和QQ中正常显示的页面



更多推荐

Ext3在IE11和360浏览器中显示不兼容、排版混乱,但在火狐、谷歌和QQ中显示正常

本文发布于:2023-04-24 11:35:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/aeb04669d877f322e7c9b3bc6148e133.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:但在   火狐   不兼容   器中   混乱

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 100435文章数
  • 26043阅读数
  • 0评论数