2011-02-07 3 views
1

아주 간단한 창을 만들었습니다. 확장자입니다. 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> 

답변

2

모든 오버 플로우에 대한 어떤 이유가 있습니까? 내가 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(); 

날이 있으면 알려 주시기 바랍니다 그렇지 않다 ...

+0

작동하지 않는 것처럼 보입니다. 여전히 시각적 인 문제입니다. 그러나 문제를 해결하기 : 창과 내용을 어떻게 만들어야 컨테이너에 넣을 수 있고, 여러 항목을 모두 포함하는 여러 개의'fieldset' 항목이 있습니다. (왜 내가 스크롤 할 수있는 창을 열지 못했을까요?) – Chau

+0

왜 그것이 너무 작을 것이라고 확신하고 싶습니까? 유용성의 관점에서 보면, 스크롤 막대는 불쾌합니다. 'bodyStyle : 'overflow : hidden''을 추가해 볼 수는 있지만 시각적 인 문제를 해결하고 싶다면 – JamesHalsall

2

자이 츠는 이미 여기에 주요 이슈 (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); 
} 
+0

잘 어울리는 낡은 습관 어딘가 : $ 나는 내 방식을 바꿀 것이다.) – Chau