Question

I have this code

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

And when I resize the container the rightmost column in some cases disapears. When I resize again in some cases the rightmost column appears again. This happens only in IE.

What could be causing this? Any idea would be helpful.

Here is the structure of the rightmost column

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

There are 3 columns and i want them to be 33 percent wide

And the main container is oppened upon pressing ext js menu button.
And the main container is placed in ext js window.

This is my problem

 <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>

you can see clearly that inner divs are wider than the one that contains them. Why IE generates badly? This doesnt happen in Chrome and FF.

Answer 1

If this happens only in IE, did you consider to discard IE as a browser? Jokes aside, if it works in any browser except IE maybe could be a bug or you have to do something special only for IE.

For example, this works for me:

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();
});

When you resize the window, each column is resized too and no one disappears.

Ciao

Wilk