ExtJS＆IE7：用簡單的窗口渲染問題

我創建了這個非常簡單的窗口擴展名。在Firefox中看起來應該是這樣，但在IE7中，包含的項目流出窗口。ExtJS＆IE7：用簡單的窗口渲染問題

Wrong rendering in IE

我能做些什麼來解決這個問題？

代碼：（文檔類型是嚴格的，但不會顯示出於某種原因）

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Online example</title> 
    <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" /> 

    <script type="text/javascript" src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>  

    <script type="text/javascript" src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>  

</head> 
<body> 

<script type="text/javascript"> 

Ext.onReady(function(){ 

    MyWindow = Ext.extend(Ext.Window, { 
     layout: 'fit', 
     width: 370, 
     height: 500, 
     resizable: true, 
     closable: true, 
     closeAction: 'hide', 
     collapsible: true, 
     autoScroll: true, 
     bodyStyle: 'padding:5px;', 
     title: 'Window', 

     initComponent: function() { 

      var config = { 
       items: 
       [ 
        { 
         xtype: 'fieldset', 
         title: 'Buffer valg', 
         layout: 'form', 
         items: 
         [ 
          { 
           xtype: 'numberfield',                          
           fieldLabel: 'Label'          
          }, { 
           xtype: 'checkbox', 
           fieldLabel: 'Label', 
           checked: true          
          } 
         ] 
        } 
       ] 
      } 

      Ext.apply(this, Ext.apply(this.initialConfig, config)); 

      // Config object has already been applied to 'this' so properties can 
      // be overriden here or new properties (e.g. items, tools, buttons) 
      // can be added, eg: 

      // Call parent (required) 
      MyWindow.superclass.initComponent.apply(this, arguments); 
     } 
    }); 

    AWindow = new MyWindow(); 
    AWindow.show(); 
}); 

</script> 

</body> 
</html>

來源

2011-02-07 Chau

是否有任何理由溢出呢？我的意思是，一個Ext.Window真的不應該有滾動條，恕我直言，我改變了你的代碼，以便它消除了滾動條，並且還應該刪除元素溢出漏洞在IE中：

Ext.onReady(function(){ 

MyWindow = Ext.extend(Ext.Window, { 
    resizable: true, 
    closable: true, 
    width: 400, 
    closeAction: 'hide', 
    collapsible: true, 
    bodyStyle: 'padding:5px;', 
    title: 'Window', 

    initComponent: function() { 

     var config = { 
      items: 
      [ 
       { 
        xtype: 'fieldset', 
        title: 'Buffer valg', 
        layout: 'form', 
        items: 
        [ 
         { 
          xtype: 'numberfield',                          
          fieldLabel: 'Label'          
         }, { 
          xtype: 'checkbox', 
          fieldLabel: 'Label', 
          checked: true          
         } 
        ] 
       } 
      ] 
     } 

     Ext.apply(this, Ext.apply(this.initialConfig, config)); 

     // Config object has already been applied to 'this' so properties can 
     // be overriden here or new properties (e.g. items, tools, buttons) 
     // can be added, eg: 

     // Call parent (required) 
     MyWindow.superclass.initComponent.apply(this, arguments); 
    } 
}); 

AWindow = new MyWindow(); 
AWindow.show();

讓我知道，如果這是不是這樣...

來源

2011-02-10 19:34:03 JamesHalsall

它似乎沒有工作 - 仍然是相同的視覺問題。但是要解決這個問題：我應該如何創建窗口和內容，以便我可以擁有一個`container`，其中包含多個fieldset`項目，它們都包含多個項目，它們*保證*窗口太小而不能顯示所有項目（這就是爲什麼我不希望窗口能夠滾動）？ – Chau 2011-02-11 08:56:17

爲什麼你要保證它會太小？從可用性的角度來看，滾動條是令人討厭的。如果你想嘗試並解決視覺問題，儘管你可以嘗試添加`bodyStyle：'overflow：hidden'` – JamesHalsall 2011-02-12 11:38:33

我認爲Jaitsu已經在這裏得到了主要問題（使用autoScroll: true），但我必須指出另一個缺陷。

你爲什麼要寫initialConfig？

initComponent: function() { 
    var config = { 
     ... 
    }; 
    Ext.apply(this, Ext.apply(this.initialConfig, config));

initialConfig應該只包含傳遞給組件構造函數的配置。它在克隆組件時使用。即使是文檔說它是隻讀的。如果你不是100％確定，那就不要這樣做。此外，我不明白你爲什麼想這樣做。當你編寫initComponent時，你的組件會工作得很好：

initComponent: function() { 
    // you can set all the config options directly to this. 
    this.items = [ 
     ... 
    ]; 
    MyWindow.superclass.initComponent.call(this); 
}

來源

2011-02-10 20:21:01

ExtJS＆IE7：用簡單的窗口渲染問題

回答

相關問題