Results 1 to 7 of 7

Thread: iFrame disappear in IE8 & IE9

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: iFrame disappear in IE8 & IE9

    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?

  2. 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" />.

  3. #2
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Anybody can help this issue?

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Answers
    11
    Vote Rating
    8
      0  

    Default

    Hi
    Could you provide a short test case?

  5. #4
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Do you have a email?
    I can send the sample ExtJS code to you.

  6. #5
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Answers
    11
    Vote Rating
    8
      0  

    Default

    Can you post it here?

  7. #6
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Default

    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
    HTML Code:
    <%@ 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
    Code:
    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
    Code:
    .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
    Code:
    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
    Code:
    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();
        }
    });

  8. #7
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    8
    Answers
    1
    Vote Rating
    0
      0  

    Default

    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" />.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •