PDA

View Full Version : iFrame disappear in IE8 & IE9



dachang
30 Jul 2012, 9:32 PM
I use ext-4.1.1 to develop application that has query function.
When I use iFrame(in NetWeaver 7.3 Portal) to load the application first time, it is no problem to show the button and combobox field.
But I click the button or select the combobox, all the components will disappear.
After I resize the browser, it will appear again and show the correct clickbutton-event result.
This situation only happen in IE8 & IE9(firefox is ok) if the application in the iFrame(in NetWeaver 7.3 Portal).
If the application is not in the iFrame for any browsers, it also has no problem.

Has anyone some issues about this? Is it bug? How to fix it?

dachang
2 Aug 2012, 8:53 PM
Anybody can help this issue?

Romick
5 Aug 2012, 11:15 PM
Hi
Could you provide a short test case?

dachang
6 Aug 2012, 6:29 PM
Do you have a email?
I can send the sample ExtJS code to you.

Romick
7 Aug 2012, 4:36 AM
Can you post it here?

dachang
8 Aug 2012, 12:34 AM
Please help to check it.
When I click the combobox in app/view/ContractManagerView.js, all the components will disappear.(in iFrame of NetWeaver 7.3 Portal)


cntrctMang.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%
Boolean privCheck = true;
%>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contract_Manager</title>
<script type="text/javascript" src="../lib/ext-4.1.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/ext-4.1.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="cntrctMang.css" />
<link rel="stylesheet" type="text/css" href="../js/ux/grid/css/GridFilters.css" />
<link rel="stylesheet" type="text/css" href="../js/ux/grid/css/RangeMenu.css" />
<% if(privCheck){ %>
<script type="text/javascript" src="cntrctMang.js"></script>
<script type="text/javascript" src="data/cntrctMangUtil.js"></script>
<% } else{ %>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('Warning','No Permission.');
});

</script>
<%} %>
</head>
<body></body>
</html>



cntrctMang.js



Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../js/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature'
]);
Ext.application({
models: [
'ContractModel',
'PoGridModel',
'MilestoneGridModel',
'AttachmentModel',
'IpSelectGeomModel',
'ActionModel'
],
stores: [
'PartnerNameStore',
'CetegoryStore',
'GeometryStore',
'StatusStore',
'ContractGridStore',
'MasterContractStore',
'ProductCategoryStore',
'RenewalPeriodStore',
'PoGridStore',
'CurrencyStore',
'MilestoneGridStore',
'MilestoneStore',
'ProductStore',
'ApprovalLogStore',
'AttachmentStore',
'IpSelectGeomStore',
'PartnerNameCreateNewStore',
'DetailFormStatusStore',
'ActionStore',
'IpSelectTechStore',
'ProductSelectStore'
],
views: [
'ContractManagerView',
'ContractDetailedForm',
'AttachmentForm',
'ProductListSelectedPanel',
'PoGridEditForm',
'MilestoneGridEditForm',
'ProductListGrid',
'MilestoneGrid',
'ApprovalForm',
'HistoryActionListWindow'
],
autoCreateViewport: true,
name: 'cntrctMang'
});



cntrctMang.css


.updated-row .x-grid-cell {
background-color: #FFFF99 !important;
}
.x-btn-default-toolbar-small {
border-color: #a3bad9 !important;
}
.x-column-header {
background: no-repeat right !important;
background-image: url('../lib/ext-4.1.1/resources/themes/images/default/button/arrow.gif') !important;
}


app/view/Viewport.js


Ext.define('cntrctMang.view.Viewport', {
extend: 'cntrctMang.view.ContractManagerView',
renderTo: Ext.getBody(),
requires: [
'cntrctMang.view.ContractManagerView',
'cntrctMang.view.ContractDetailedForm',
'cntrctMang.view.AttachmentForm',
'cntrctMang.view.PoGridEditForm',
'cntrctMang.view.MilestoneGrid',
'cntrctMang.view.MilestoneGridEditForm',
'cntrctMang.view.ProductListGrid',
'cntrctMang.view.ProductListSelectedPanel',
'cntrctMang.view.ApprovalForm'
]
});

app/view/ContractManagerView.js

Ext.define('cntrctMang.view.ContractManagerView', {
extend: 'Ext.container.Viewport',
id: 'ContractManagerView',
autoScroll: false,
layout: {
align: 'stretch',
type: 'vbox'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
anchor: '100%',
border: 0,
layout: {
type: 'column'
},
id: 'queryForm',
bodyBorder: false,
bodyPadding: 10,
title: '',
height: 110,
//region: 'north',
margins: '',
items: [
{
xtype: 'container',
columnWidth: 0.33,
layout: 'anchor',
items: [
{
xtype: 'combobox',
id: 'PartnerNameComboBox',
name: 'PartnerNameComboBox',
fieldLabel: 'Partner Name',
anchor: '96%',
labelWidth: 105,
displayField: 'displayName',
forceSelection: true,
valueField: 'acctCd',
typeAhead: true,
queryMode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'All',
store: 'PartnerNameStore'
// listConfig: {
// getInnerTpl: function () {
// return '[{acctCd}] {acctShortName}';
// }
// }
},
{
xtype: 'combobox',
id: 'ContractStatusComboBox',
name: 'ContractStatusComboBox',
fieldLabel: 'Contract Status',
anchor: '96%',
labelWidth: 105,
displayField: 'statusName',
valueField: 'statusCode',
typeAhead: true,
forceSelection: true,
queryMode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'All',
store: 'StatusStore'
}
]
},
{
xtype: 'container',
columnWidth: 0.33,
layout: 'anchor',
items: [
{
xtype: 'combobox',
id: 'GeometryComboBox',
name: 'GeometryComboBox',
fieldLabel: 'Geometry',
anchor: '96%',
labelWidth: 120,
displayField: 'geomDesc',
valueField: 'geomCode',
typeAhead: true,
forceSelection: true,
queryMode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'All',
//multiSelect: true,
store: 'GeometryStore'
}, {
xtype: 'datefield',
id: 'EffectiveStartDate',
name: 'EffectiveStartDate',
fieldLabel: 'Effective Date: from',
anchor: '96%',
labelSeparator: ' ',
labelWidth: 120,
format: 'Y/m/d'
}
]
},
{
xtype: 'container',
columnWidth: 0.34,
layout: 'anchor',
items: [
{
xtype: 'combobox',
id: 'ContractCategoryComboBox',
name: 'ContractCategoryComboBox',
fieldLabel: 'Contract Category',
anchor: '100%',
labelWidth: 105,
displayField: 'categoryName',
valueField: 'categoryCode',
typeAhead: true,
forceSelection: true,
queryMode: 'local',
triggerAction: 'all',
selectOnFocus: true,
emptyText: 'All',
store: 'CetegoryStore'
},
{
xtype: 'datefield',
id: 'EffectiveEndDate',
name: 'EffectiveEndDate',
anchor: '100%',
fieldLabel: 'to',
hideLabel: false,
labelSeparator: ' ',
labelWidth: 50,
labelAlign: 'right',
labelPad: 60,
format: 'Y/m/d'
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
border: 0,
padding: '0 0 0 10',
style: 'background: white',
ui: 'footer',
dock: 'bottom',
defaults: {minWidth: 100},
items: ['->',
{
xtype: 'button',
id: 'QueryButton',
text: 'Query',
listeners: {
'click': function (btn, ent) {
if(this.up('form').getForm().isValid()){
var myParams = this.up('form').getForm().getValues(true);
Ext.getCmp('cntrctGrid').getStore().load({ params: myParams });
Ext.getCmp('cntrctGrid').show();
}
}
}
},
{
xtype: 'button',
id: 'ResetButton',
text: 'Reset',
listeners: {
click: {
fn: me.onResetButtonClick,
scope: me
}
}
},
{
xtype: 'button',
id: 'CreateNewButton',
text: 'Create New',
hidden: true,
listeners: {
click: {
fn: me.onCreateNewButtonClick,
scope: me
},
afterrender: function(me){
Ext.Ajax.request({
url: '../rest/cntrctMang/isPriorityUser',
method: 'GET',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
if(obj.success){
me.show();
}
},
failure: function(response, opts) {
}
});
}
}
}
]
}
]
},
{
xtype: 'panel',
border: 0,
id: 'QueryPanel',
layout: {
type: 'fit'
},
bodyBorder: false,
title: '',
flex: 1,
//region: 'center',
items: [
{
xtype: 'gridpanel',
autoShow: false,
padding: 10,
title: '',
hidden: true,
id: 'cntrctGrid',
store: 'ContractGridStore',
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'acctCd',
flex: 1,
renderer: function(value){
var store = Ext.data.StoreManager.lookup('PartnerNameStore');
var rendererValue = "";
for(var i=0;i<store.getCount();i++){
var model = store.getAt(i);
if(value == model.get('acctCd')){
rendererValue = "[" + model.get('acctCd') + "] " + model.get('acctShortName');
break;
}
}
return rendererValue;
},
text: 'Partner Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'cntrctCatg',
flex: 1,
renderer: cntrctMang.Util.contractCategoryRenderer,
text: 'Contract Category'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var temp="";
if(record.get('cntrctLevel')>1){
for(var i=0;i<record.get('cntrctLevel')-1;i++){
temp=temp+">";
}
temp=temp+" ";
}
return '<a href="javascript:cntrctMang.Util.viewContractDetail(\'' + record.get('cntrctNo') + '\', \''+record.get('cntrctVer')+'\', \''+record.get('cntrctStatus')+'\', \''+record.get('acctCd')+'\', false, false )">' +temp+ value + '</a>';
},
dataIndex: 'cntrctTitle',
flex: 2,
text: 'Contract Name'
},
{
xtype: 'datecolumn',
dataIndex: 'effDt',
flex: 1,
text: 'Effective Date',
format: 'Y/m/d'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var store = Ext.data.StoreManager.lookup('GeometryStore');
var rendererValue = "";
for(var i=0;i<store.getCount();i++){
var model = store.getAt(i);
if(value.indexOf(model.get('geomCode'))>-1){
if(rendererValue == ""){
rendererValue = model.get('geomDesc');
}else{
rendererValue = rendererValue + ", " + model.get('geomDesc');
}
}
}
metaData.tdAttr= 'data-qtip="'+rendererValue+'"';
return rendererValue;
},
dataIndex: 'geomList',
flex: 1.5,
text: 'Geometry'
},
{
xtype: 'gridcolumn',
dataIndex: 'cntrctStatus',
flex: 1,
renderer: cntrctMang.Util.contractStatusRenderer,
text: 'Status'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return '<a href="javascript:cntrctMang.Util.openHistorySelector(\''+ record.get('cntrctNo') +'\',\'' + record.get('cntrctVer') + '\',\'' + record.get('cntrctStatus') + '\',\'' + record.get('acctCd') + '\')">' + Ext.util.Format.date(value,'Y/m/d') + '</a>';
},
dataIndex: 'updateDt',
text: 'Last Update'
},
{
xtype: 'gridcolumn',
hidden: true,
id: 'topCntrctTitle',
width: 50,
dataIndex: 'topCntrctTitle',
text: 'Top Cntrct Title'
}
],
features: [
{
ftype: 'grouping',
groupHeaderTpl: '{name}',
hideGroupedHeader: true
}
]
}
]
}
],
listeners: {
render: {
fn: me.onContractManagerViewBeforeShow,
scope: me
}
}
});
me.callParent(arguments);
},
onResetButtonClick: function(button, e, options) {
var item=["PartnerNameComboBox","GeometryComboBox","ContractCategoryComboBox",
"ContractStatusComboBox","EffectiveStartDate","EffectiveEndDate"];
for (i=0;i< item.length; i++) {
Ext.getCmp(item[i]).reset();
}
Ext.getCmp('cntrctGrid').hide();
},
onCreateNewButtonClick: function(button, e, options) {
var partnerName = Ext.getCmp('PartnerNameComboBox').getValue();
var geometryList = Ext.getCmp('GeometryComboBox').getValue();
cntrctMang.Util.viewContractDetail('', '', '', '', true, false);
var store = Ext.getCmp('ContractCurrencyCombo').getStore();
store.load();
store = Ext.getCmp('PartnerNameCombo').getStore();
store.load();
//store.add({typeId: 'Credit', typeDesc: 'Credit'});
},
onContractManagerViewBeforeShow: function(abstractcomponent, options) {
var store = Ext.getCmp('PartnerNameComboBox').getStore();
store.load();
store = Ext.getCmp('GeometryComboBox').getStore();
store.load();
}
});

dachang
8 Aug 2012, 11:03 PM
I solve this issue.

I add <meta http-equiv="X-UA-Compatible" content="IE=8"> below <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />.