layout problems with extjs 4.1 in IE9

[Moinsen]

Hi,

i try to move from 4.07 to 4.1 and i have some layout problems.
This is my login form:

        
var loginForm = new Ext.form.FormPanel({           
  baseCls: 'x-plain',           
  labelWidth: 75,           
  defaultType: 'textfield',           
  items: [{              
    fieldLabel: 'Benutzer',               
    id: 'user',               
    name: 'user',               
    anchor:'90%'               
  },{               
    fieldLabel: 'Kunde',               
    id: 'company',               
    name: 'company',               
    anchor: '90%'              
  },{               
    fieldLabel: 'Passwort',               
    id: 'password',               
    name: 'password',               
    inputType: 'password',               
    anchor: '90%'                 
  }],
  buttons: [{
    text: 'Login',
    handler: function() {   }
  }]         
});

var loginWindow = new Ext.Window({           
  title: 'Login',           
  width: 300,           
  height:160,           
  closable:false,           
  minWidth: 300,           
  minHeight: 140,           
  layout: 'fit',           
  plain:true,           
  modal:true,           
  bodyStyle:'padding:5px;',           
  items: loginForm
});

loginWindow.show();

In Chrome it looks good but it don't works in IE. In IE i get these errors:

[E] You have set frame: true explicity on this component (window) and it does not have any framing defined in the CSS template. In this case IE cannot figure out what sizes to use and thus framing on this component will be disabled. 
[E] You have set frame: true explicity on this component (header) and it does not have any framing defined in the CSS template. In this case IE cannot figure out what sizes to use and thus framing on this component will be disabled. 
[E] You have set frame: true explicity on this component (button) and it does not have any framing defined in the CSS template. In this case IE cannot figure out what sizes to use and thus framing on this component will be disabled.

So there is something wrong with the CSS and IE9? Help needed, thanks.

[scottmartin]

The following displays fine on my IE9 VM:

...added Ext.onReady() .. without it displays incorrectly as shown.

Ext.onReady(function(){

    var loginForm = new Ext.form.FormPanel({           
      baseCls: 'x-plain',           
      labelWidth: 75,           
      defaultType: 'textfield',           
      items: [{              
        fieldLabel: 'Benutzer',               
        id: 'user',               
        name: 'user',               
        anchor:'90%'               
      },{               
        fieldLabel: 'Kunde',               
        id: 'company',               
        name: 'company',               
        anchor: '90%'              
      },{               
        fieldLabel: 'Passwort',               
        id: 'password',               
        name: 'password',               
        inputType: 'password',               
        anchor: '90%'                 
      }],
      buttons: [{
        text: 'Login',
        handler: function() {   }
      }]         
    });

    var loginWindow = new Ext.Window({           
      title: 'Login',           
      width: 300,           
      height:160,           
      closable:false,           
      minWidth: 300,           
      minHeight: 140,           
      layout: 'fit',           
      plain:true,           
      modal:true,           
      bodyStyle:'padding:5px;',           
      items: loginForm
    });

    loginWindow.show(); 

});

[Moinsen]

Hi,

yes you are right. If i move the whole block just behind the Ext.onReady call it works. There are a few functions and defines just before the login form. Strange behavior! So the order is important in IE.

Thank you!

[evant]

The order is important everywhere, it's more likely you're just getting lucky with the other browsers

[polycom]

where is Ext.onReady() supposed to go in an application. Doesn't the launch() method of the application get called when the DOM is ready?

-- Patrick

[evant]

The launch method is triggered by onReady, so you're already there by that point.

[scottmartin]

Here is a good explanation:
http://loongest.com/sencha/extjs-v4-...dy-ext-onload/

Ext.application({ // page ready, mvc

    launch : function () { 
       // launch after ready
    }

});

Scott.