Extjs 弹出窗口 window 支持 Internet Explorer 9
Extjs pop-up window support on Internet Explorer 9
我正在尝试 运行 IE 9 上已经存在的应用程序，但弹出窗口 window 以及 .show() 和 .hide() 命令存在问题。
我得到一个蓝色的空白屏幕
申请 运行 顺利 Chrome
主面板代码
<% @page language = "java"
contentType = "text/html; charset=UTF-8"
pageEncoding = "UTF-8" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=ISO-8859-1" >
< meta http - equiv = "X-UA-Compatible"
content = "IE=9" / >
< script >
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'lib');
Ext.require(['*']);
Ext.onReady(function() {
/* var myMask2;
myMask2 = new Ext.LoadMask(Ext.getBody(), {msg:"Loading Please wait..."}); */
var basePanel = Ext.create('Ext.form.Panel', {
id: 'basePanel',
frame: true,
title: 'basePanel',
width: 1500,
height: 80,
collapsible: true,
layout: {
type: 'table',
columns: 1
},
defaults: {
width: 100,
labelWidth: 85
},
fieldDefaults: {
labelAlign: 'right',
msgTarget: 'side',
margin: '0 0 5 0'
},
defaultType: 'textfield',
items: [{
xtype: 'button',
text: 'clickToGetPopup',
id: 'clickToGetPopup',
disabled: true,
margin: '10 7 5 4',
width: 100,
handler: function() {
var i = 0;
if (Ext.getCmp("popupPanel") != undefined) {
Ext.getCmp("popupPanel").getStore().setProxy({
type: 'ajax',
method: 'Get',
url: 'lib/xyz.jsp
reader: {
root: '
topics ',
totalProperty: '
totalCount '
}
});
Ext.getCmp("popupPanel").getStore().loadPage(1);
}
popupPanel.popupWindow.show();
popupPanel.popupPanel.center();
}
}]
});
Ext.define('
basePanel ', {
singleton : true,
basePanel : basePanel
});
});
</script>
</head>
<body>
</body>
</html>
弹窗上的代码window
<% @page language = "java"
contentType = "text/html; charset=UTF-8"
pageEncoding = "UTF-8" %>
<% @page import = "java.text.SimpleDateFormat" %>
<% @page import = "java.util.Date" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=ISO-8859-1" >
< meta http - equiv = "X-UA-Compatible"
content = "IE=9" / >
< style >
.myBold {
font - weight: bold;
font - size: 11px;
color: #483D8B;
}
.mycol
{
color:# 483D8B;
font - weight: bold;
font - size: 11px;
}
.btn {
border: solid;
border - color: black;
background - color: #9EB32D;
background-image: none;
}
.x-grid-row .custom-column {
background-color: # D9D9D9;
}
.my - combo - lst.x - boundlist - item {
font - size: 8px;
}
.x - boundlist - item {
font - size: 10px;
}
.x - form - field {
height: 14px;
font - size: 10px;
}
.x - form - text {
height: 14px;
font - size: 10px;
}
.x - field - form {
height: 14px;
font - size: 10px;
}
.x - form - focus {
height: 14px;
font - size: 10px;
}
.x - field - form - focus {
height: 14px;
font - size: 10px;
}
.x - field -
default -form - focus {
height: 14px;
font - size: 10px;
} < /style>
<script>
Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath('Ext.ux', 'lib');
Ext.require([ '*' ]);
/ / definer For Grid
Ext.define('popupModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'A'
}, {
name: 'B'
}, {
name: 'C'
}, {
name: 'D'
},
],
idProperty: 'ParentfromRTNWGridModel'
});
var popupStore = new Ext.data.Store({
model: 'popupModel',
pageSize: 20
});
Ext.onReady(function() {
Ext.suspendLayouts();
// add/remove items here
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext
.create('Ext.state.CookieProvider'));
var nwId = "";
var nwVal = "";
//var nwchangedVal = "";
var nwIndex = "";
var item = "";
var CellEditingRTNW = Ext.create('Ext.grid.plugin.CellEditing', {
pluginId: 'CellEditingRTNW',
extend: 'Ext.grid.Editing',
clicksToMoveEditor: 1,
clicksToEdit: 1,
editStyle: 'cell',
autoCancel: false,
});
var flag1 = false;
var popupPanel = Ext.create('Ext.grid.Panel', {
id: 'popupPanel',
store: popupStore,
title: 'popupPanel ',
autoScroll: true,
columnLines: true,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
hidden: true,
plugins: [
CellEditingRTNW,
Ext.create('Ext.grid.plugin.Editing', {}),
Ext.create('Ext.ux.ColumnAutoWidthPlugin', {})
],
columns: [{
text: 'A Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'A',
}, {
text: 'B column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'B',
editor: {
xtype: 'combobox',
store: storeCombo,
autoLoad: false,
hideTrigger: true,
queryMode: 'remote',
editable: false,
displayField: 'name',
valueField: 'name',
selectOnFocus: true,
d: 'popupEditor',
listeners: {
blur: function(e1, o) {
console.log(e1);
}
}
}
}, {
text: 'C Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'Child_Name',
tdCls: 'custom-column'
}, {
text: 'D Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'Child_Value',
tdCls: 'custom-column'
}],
viewConfig: {
stripeRows: true,
markDirty: false,
enableTextSelection: true,
displayInfo: true,
}
});
var popupFilter = Ext.create('Ext.form.Panel', {
id: 'popupFilter',
frame: true,
//title :'popupFilter',
collapsible: false,
collapsed: false,
buttonAlign: 'center',
layout: {
type: 'table',
columns: 4,
align: 'middle'
},
items: [{
xtype: 'radiogroup',
align: 'left',
width: 200,
id: 'Parentidtoselect',
columns: 2,
items: [
{
boxLabel: '1',
name: 'rb',
width: '700',
inputValue: '1',
id: '1',
listeners: {
change: function(cb, nv, ov) {
if (nv) {
1.show();
2.hide();
}
}
}
}, {
boxLabel: '2',
name: 'rb',
width: '700',
inputValue: '2',
hidden: true,
id: '2',
listeners: {
change: function(cb, nv, ov) {
if (nv) {
2.show();
1.hide();
}
}
}
}
]
},
{
xtype: 'button',
text: 'Cancel',
id: 'cancel',
margin: '0 0 0 10',
//colspan:2,
width: 100,
handler: function() {
popupWindow.hide();
}
}
]
});
var popupWindow = Ext.create('Ext.window.Window', {
autoWidth: true,
autoScroll: true,
closable: true,
constrainHeader: true,
id: 'popupWindow',
height: 550,
width: 700,
closeAction: 'hide',
plain: true,
stateful: false,
title: '<div style="text-align:center;">popupWindow</div>',
hidden: true,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
popupFilter,
popupPanel,
],
listeners: {
beforehide: function(panel) {}
}
});
Ext.define('popupMainPanel', {
singleton: true,
popupWindow: popupWindow,
flag1: flag1,
popupPanel: popupPanel,
popupFilter: popupFilter
});
Ext.resumeLayouts(true);
}); < /script>
</head >
< body >
< /body>
</html >
当你在IE9中使用兼容模式时，会发生什么？这对场景有帮助吗？我根据你的措辞假设这在其他地方也有效，如果那是错误的，请告诉我。
这是什么版本的 Ext JS？您是否尝试过用它创建 Fiddle 以便针对不同的库版本进行测试？ https://fiddle.sencha.com/#home
一些代码可能会对我们有所帮助，对您有所帮助。
更新：
所以我的第一个想法是你使用 popupPanel 就好像它是一个 JavaScript 全局变量但是你还没有在顶部代码中设置这个变量。您可能需要一个 var popupPanel = Ext.getCmp("PopupPanel") ，然后使用该对象来调用这些函数。现在我在第二个 window 的代码中看到了它，但我认为在第一个 window 中闭包会把你搞得一团糟。我认为此时有更多经验的人会插话我的一半答案。
另外你说这在其他浏览器中有效但在 IE9 中无效？你在其他什么浏览器上测试过这个？或者您是否更改了代码，但现在它根本不起作用？
我正在尝试 运行 IE 9 上已经存在的应用程序，但弹出窗口 window 以及 .show() 和 .hide() 命令存在问题。 我得到一个蓝色的空白屏幕
申请 运行 顺利 Chrome
主面板代码
<% @page language = "java"
contentType = "text/html; charset=UTF-8"
pageEncoding = "UTF-8" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=ISO-8859-1" >
< meta http - equiv = "X-UA-Compatible"
content = "IE=9" / >
< script >
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'lib');
Ext.require(['*']);
Ext.onReady(function() {
/* var myMask2;
myMask2 = new Ext.LoadMask(Ext.getBody(), {msg:"Loading Please wait..."}); */
var basePanel = Ext.create('Ext.form.Panel', {
id: 'basePanel',
frame: true,
title: 'basePanel',
width: 1500,
height: 80,
collapsible: true,
layout: {
type: 'table',
columns: 1
},
defaults: {
width: 100,
labelWidth: 85
},
fieldDefaults: {
labelAlign: 'right',
msgTarget: 'side',
margin: '0 0 5 0'
},
defaultType: 'textfield',
items: [{
xtype: 'button',
text: 'clickToGetPopup',
id: 'clickToGetPopup',
disabled: true,
margin: '10 7 5 4',
width: 100,
handler: function() {
var i = 0;
if (Ext.getCmp("popupPanel") != undefined) {
Ext.getCmp("popupPanel").getStore().setProxy({
type: 'ajax',
method: 'Get',
url: 'lib/xyz.jsp
reader: {
root: '
topics ',
totalProperty: '
totalCount '
}
});
Ext.getCmp("popupPanel").getStore().loadPage(1);
}
popupPanel.popupWindow.show();
popupPanel.popupPanel.center();
}
}]
});
Ext.define('
basePanel ', {
singleton : true,
basePanel : basePanel
});
});
</script>
</head>
<body>
</body>
</html>
弹窗上的代码window
<% @page language = "java"
contentType = "text/html; charset=UTF-8"
pageEncoding = "UTF-8" %>
<% @page import = "java.text.SimpleDateFormat" %>
<% @page import = "java.util.Date" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=ISO-8859-1" >
< meta http - equiv = "X-UA-Compatible"
content = "IE=9" / >
< style >
.myBold {
font - weight: bold;
font - size: 11px;
color: #483D8B;
}
.mycol
{
color:# 483D8B;
font - weight: bold;
font - size: 11px;
}
.btn {
border: solid;
border - color: black;
background - color: #9EB32D;
background-image: none;
}
.x-grid-row .custom-column {
background-color: # D9D9D9;
}
.my - combo - lst.x - boundlist - item {
font - size: 8px;
}
.x - boundlist - item {
font - size: 10px;
}
.x - form - field {
height: 14px;
font - size: 10px;
}
.x - form - text {
height: 14px;
font - size: 10px;
}
.x - field - form {
height: 14px;
font - size: 10px;
}
.x - form - focus {
height: 14px;
font - size: 10px;
}
.x - field - form - focus {
height: 14px;
font - size: 10px;
}
.x - field -
default -form - focus {
height: 14px;
font - size: 10px;
} < /style>
<script>
Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath('Ext.ux', 'lib');
Ext.require([ '*' ]);
/ / definer For Grid
Ext.define('popupModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'A'
}, {
name: 'B'
}, {
name: 'C'
}, {
name: 'D'
},
],
idProperty: 'ParentfromRTNWGridModel'
});
var popupStore = new Ext.data.Store({
model: 'popupModel',
pageSize: 20
});
Ext.onReady(function() {
Ext.suspendLayouts();
// add/remove items here
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext
.create('Ext.state.CookieProvider'));
var nwId = "";
var nwVal = "";
//var nwchangedVal = "";
var nwIndex = "";
var item = "";
var CellEditingRTNW = Ext.create('Ext.grid.plugin.CellEditing', {
pluginId: 'CellEditingRTNW',
extend: 'Ext.grid.Editing',
clicksToMoveEditor: 1,
clicksToEdit: 1,
editStyle: 'cell',
autoCancel: false,
});
var flag1 = false;
var popupPanel = Ext.create('Ext.grid.Panel', {
id: 'popupPanel',
store: popupStore,
title: 'popupPanel ',
autoScroll: true,
columnLines: true,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
hidden: true,
plugins: [
CellEditingRTNW,
Ext.create('Ext.grid.plugin.Editing', {}),
Ext.create('Ext.ux.ColumnAutoWidthPlugin', {})
],
columns: [{
text: 'A Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'A',
}, {
text: 'B column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'B',
editor: {
xtype: 'combobox',
store: storeCombo,
autoLoad: false,
hideTrigger: true,
queryMode: 'remote',
editable: false,
displayField: 'name',
valueField: 'name',
selectOnFocus: true,
d: 'popupEditor',
listeners: {
blur: function(e1, o) {
console.log(e1);
}
}
}
}, {
text: 'C Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'Child_Name',
tdCls: 'custom-column'
}, {
text: 'D Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'Child_Value',
tdCls: 'custom-column'
}],
viewConfig: {
stripeRows: true,
markDirty: false,
enableTextSelection: true,
displayInfo: true,
}
});
var popupFilter = Ext.create('Ext.form.Panel', {
id: 'popupFilter',
frame: true,
//title :'popupFilter',
collapsible: false,
collapsed: false,
buttonAlign: 'center',
layout: {
type: 'table',
columns: 4,
align: 'middle'
},
items: [{
xtype: 'radiogroup',
align: 'left',
width: 200,
id: 'Parentidtoselect',
columns: 2,
items: [
{
boxLabel: '1',
name: 'rb',
width: '700',
inputValue: '1',
id: '1',
listeners: {
change: function(cb, nv, ov) {
if (nv) {
1.show();
2.hide();
}
}
}
}, {
boxLabel: '2',
name: 'rb',
width: '700',
inputValue: '2',
hidden: true,
id: '2',
listeners: {
change: function(cb, nv, ov) {
if (nv) {
2.show();
1.hide();
}
}
}
}
]
},
{
xtype: 'button',
text: 'Cancel',
id: 'cancel',
margin: '0 0 0 10',
//colspan:2,
width: 100,
handler: function() {
popupWindow.hide();
}
}
]
});
var popupWindow = Ext.create('Ext.window.Window', {
autoWidth: true,
autoScroll: true,
closable: true,
constrainHeader: true,
id: 'popupWindow',
height: 550,
width: 700,
closeAction: 'hide',
plain: true,
stateful: false,
title: '<div style="text-align:center;">popupWindow</div>',
hidden: true,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
popupFilter,
popupPanel,
],
listeners: {
beforehide: function(panel) {}
}
});
Ext.define('popupMainPanel', {
singleton: true,
popupWindow: popupWindow,
flag1: flag1,
popupPanel: popupPanel,
popupFilter: popupFilter
});
Ext.resumeLayouts(true);
}); < /script>
</head >
< body >
< /body>
</html >
当你在IE9中使用兼容模式时，会发生什么？这对场景有帮助吗？我根据你的措辞假设这在其他地方也有效，如果那是错误的，请告诉我。
这是什么版本的 Ext JS？您是否尝试过用它创建 Fiddle 以便针对不同的库版本进行测试？ https://fiddle.sencha.com/#home
一些代码可能会对我们有所帮助，对您有所帮助。
更新：
所以我的第一个想法是你使用 popupPanel 就好像它是一个 JavaScript 全局变量但是你还没有在顶部代码中设置这个变量。您可能需要一个 var popupPanel = Ext.getCmp("PopupPanel") ，然后使用该对象来调用这些函数。现在我在第二个 window 的代码中看到了它，但我认为在第一个 window 中闭包会把你搞得一团糟。我认为此时有更多经验的人会插话我的一半答案。
另外你说这在其他浏览器中有效但在 IE9 中无效？你在其他什么浏览器上测试过这个？或者您是否更改了代码，但现在它根本不起作用？