ExtJS & IE7: Рендеринг проблем с простым окном

Я создал это очень простое окно . В Firefox это выглядит так, как должно, но в IE7, содержащиеся элементы вытекают из окна.ExtJS & IE7: Рендеринг проблем с простым окном

Wrong rendering in IE

Что я могу сделать, чтобы исправить это?

Код: (Doctype строга, но не будет отображаться для какой-либо причины)

<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 не должен действительно иметь полос прокрутки IMHO, я изменил свой код, чтобы он удаляет полосы прокрутки, и она также должна удалить переполнение ошибки элемента в 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

Это не работает, все еще такая же визуальная проблема. Но проблема: как мне создать окно и содержимое, чтобы я мог иметь «контейнер» с несколькими элементами «fieldset», содержащими несколько элементов, которые * гарантируют *, что окно слишком мало, чтобы показать их все (именно поэтому я не смогу прокрутить окно)? – Chau

Почему вы хотите _guarantee_, что он будет слишком маленьким? С точки зрения удобства использования полоса прокрутки является неприятной. Если вы хотите попробовать и устранить визуальную проблему, хотя можете попробовать добавить 'bodyStyle: 'overflow: hidden'' – JamesHalsall

Я думаю, что у Jaitsu уже есть главная проблема здесь (использование autoScroll: true), но я должен указать еще один недостаток.

Почему вы пишете исходный код?

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

Ну, это старая привычка, которую я выбрал где-то: $ Я изменю свои пути - спасибо за объяснение:) – Chau

ExtJS & IE7: Рендеринг проблем с простым окном

ответ

Смежные вопросы