Extjs окно не показывает элементы хорошо в IE

Question

У меня есть этот код

var main_container = Ext.create('Ext.container.Container', 
{ 
    xtype: 'container', 
    id: "id_container", 
    anchor: '100%', 
    layout:'column', 
    items:[ 
     column_1, 
     column_2, 
     column_3 
    ] 
}) 

И когда я изменить размер контейнеру крайний правый столбец в некоторых случаях disapears. Когда я снова изменяю размер, в некоторых случаях снова появляется самый правый столбец. Это происходит только в IE.

Что может быть причиной этого? Любая идея была бы полезна.

Вот структура правой колонке

var column_3 = Ext.create('Ext.container.Container', 
    { 
    columnWidth: .33, 
    layout: 'anchor', 
    id: 'column_3', 
    items:[ 
     grid_1, 
     grid_2 
    ] 
    }) 

Есть 3 колонки, и я хочу, чтобы они были 33 процентов шириной

И главный контейнер oppened при нажатии Ext, кнопки меню. И главный контейнер помещается в окно ext js.

Это моя проблема

<div class="x-container x-column x-container-default" id="column_roles" role="presentation" style="width: 400px;"> 
     <DIV style="WIDTH: 413px; HEIGHT: 45%" id=grid_1 class="x-panel x-grid x-property-grid x-panel-default x-with-col-lines x-panel-with-col-lines x-panel-default-with-col-lines x-masked-relative x-masked" role=presentation aria-labelledby=component-1234>...</div> 

     <DIV style="WIDTH: 413px; HEIGHT: 45%" id=grid_2 class="x-panel x-grid x-property-grid x-panel-default x-with-col-lines x-panel-with-col-lines x-panel-default-with-col-lines x-masked-relative x-masked" role=presentation aria-labelledby=component-1237> ... </div> 
</div> 

вы можете ясно видеть, что внутренние дивы шире, чем тот, который содержит их. Почему IE генерирует плохо? Это не происходит в Chrome и FF.

Answer 1

Если это происходит только в IE, считаете ли вы, что IE брошен как браузер? Шутки в сторону, если он работает в любом браузере, кроме IE, возможно, может быть ошибкой, или вам нужно сделать что-то особенное только для IE.

Например, это работает для меня:

Ext.onReady (function() { 
    Ext.create ('Ext.window.Window', { 
     renderTo: Ext.getBody() , 
     title: 'Win' , 
     width: 500 , 
     height: 100 , 
     layout: 'anchor' , 
     resizable: true , 
     items: [{ 
      xtype: 'container' , 
      anchor: '100%' , 
      layout: 'column' , 
      defaults: { 
       layout: 'anchor' 
      } , 
      items: [{ 
       xtype: 'container' , 
       columnWidth: .33 , 
       defaults: { 
        xtype: 'textfield' , 
        anchor: '100%' 
       } , 
       items: [{ 
        fieldLabel: 'name' 
       } , { 
        fieldLabel: 'surname' 
       }] 
      } , { 
       xtype: 'container' , 
       columnWidth: .33 , 
       defaults: { 
        xtype: 'textfield' , 
        anchor: '100%' 
       } , 
       items: [{ 
        fieldLabel: 'age' 
       } , { 
        fieldLabel: 'place' 
       }] 
      } , { 
       xtype: 'container' , 
       columnWidth: .33 , 
       defaults: { 
        xtype: 'textfield' , 
        anchor: '100%' 
       } , 
       items: [{ 
        fieldLabel: 'nickname' 
       } , { 
        fieldLabel: 'whatever' 
       }] 
      }] 
     }] 
    }).show(); 
}); 

При изменении размеров окна, каждый столбец изменяется тоже, и никто не исчезает.

Ciao

Wilk