Internet Explorer 9上的Extjs弹出窗口支持

时间：2015-04-08 11:01:49

标签： windows internet-explorer extjs

我正在尝试在IE 9上运行已经存在的应用程序，但它在弹出窗口和.show（）和.hide（）命令方面存在问题。 我得到一个蓝色的空白屏幕

应用程序在Chrome上运行顺利

主面板上的代码

＆＃13;
＆＃13; 
<% @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>
＆＃13;
＆＃13;
＆＃13;

弹出窗口中的代码

＆＃13;
＆＃13; 
<% @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 >
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

当你在IE9中使用兼容模式时，会发生什么？这有助于这种情况吗？我正在根据你的措辞做出假设，认为这是在其他地方工作，请告诉我这是不是错了。

这是什么版本的Ext JS？您是否尝试过创建一个小提琴，以便针对不同的库版本进行测试？ https://fiddle.sencha.com/#home

一些代码可以帮助我们，帮助你。

更新： 所以我的第一个想法是你使用popupPanel就像它是一个JavaScript全局变量，但你还没有在顶部代码中设置这个变量。您可能需要var popupPanel = Ext.getCmp("PopupPanel")，然后使用该对象来调用这些函数。现在我在第二个窗口的代码中看到它，但我认为闭包在第一个窗口中弄乱了你。我觉得有经验的人会在这一点上与我现在的半答案相提并论。

你是否也说过这个在其他浏览器中工作但在IE9中却没有？你在其他什么浏览器上测试过这个？或者您是否进行了代码更改，现在它根本不起作用？

相关问题
最新问题