Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Vote Rating
    1
    Moinsen is on a distinguished road

      0  

    Default layout problems with extjs 4.1 in IE9

    layout problems with extjs 4.1 in IE9


    Hi,

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

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

    Code:
    [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.
    Attached Images

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    The following displays fine on my IE9 VM:

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

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

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Katzenellenbogen
    Posts
    51
    Vote Rating
    1
    Moinsen is on a distinguished road

      0  

    Default


    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!

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,049
    Vote Rating
    657
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The order is important everywhere, it's more likely you're just getting lucky with the other browsers
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    6
    Vote Rating
    0
    polycom is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,049
    Vote Rating
    657
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The launch method is triggered by onReady, so you're already there by that point.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Code:
    Ext.application({ // page ready, mvc
    
        launch : function () { 
           // launch after ready
        }
    
    });
    Scott.