Results 1 to 3 of 3

Thread: Form looks OK in SA but not in browser

  1. #1
    Sencha Premium User
    Join Date
    Dec 2010
    Posts
    275
    Vote Rating
    9
      0  

    Default Form looks OK in SA but not in browser

    I have built a login form in SA that looks fine but in Firefox its messed up. Can anyone spot the problem?

    Screenshot of form in SA:
    ScreenHunter_03 Aug. 26 18.53.jpg

    Screenshot of form in Firefox:
    ScreenHunter_04 Aug. 26 18.53.jpg

    Code:
    Code:
    Ext.define('Login.view.LoginWindow', {
        extend: 'Ext.window.Window',
        alias: 'widget.loginwindow',
    
        height: 125,
        width: 500,
        layout: {
            align: 'stretch',
            type: 'hbox'
        },
        closable: false,
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'container',
                        flex: 3,
                        border: false,
                        height: 120,
                        style: 'background-image:url("logo.png");background-position:center;background-repeat:no-repeat;background-color:white;',
                        width: 400,
                        layout: {
                            align: 'stretch',
                            type: 'hbox'
                        }
                    },
                    {
                        xtype: 'form',
                        flex: 4,
                        border: false,
                        itemId: 'loginForm',
                        bodyPadding: 10,
                        method: 'POST',
                        url: 'login/login',
                        items: [
                            {
                                xtype: 'textfield',
                                anchor: '100%',
                                itemId: 'username',
                                name: 'username',
                                fieldLabel: 'User Name',
                                allowBlank: false,
                                enableKeyEvents: true
                            },
                            {
                                xtype: 'textfield',
                                anchor: '100%',
                                itemId: 'password',
                                inputType: 'password',
                                name: 'password',
                                fieldLabel: 'Password',
                                allowBlank: false,
                                blankText: 'Password Required',
                                enableKeyEvents: true
                            },
                            {
                                xtype: 'container',
                                height: 40,
                                style: 'margin-top:15px;',
                                layout: {
                                    align: 'middle',
                                    pack: 'center',
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'button',
                                        flex: 1,
                                        margins: '0 10 0 5',
                                        height: 22,
                                        itemId: 'loginBtn',
                                        width: 75,
                                        text: 'Login'
                                    },
                                    {
                                        xtype: 'button',
                                        flex: 1,
                                        margins: '0 5 0 10',
                                        height: 22,
                                        itemId: 'resetBtn',
                                        width: 75,
                                        text: 'Reset'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            });
    
            me.callParent(arguments);
        }
    
    });

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488
    Vote Rating
    147
      0  

    Default

    Firebug is your friend, check out the underlying styles/box model/etc and see wahts going on.

    It looks like if you set a title to your window it may fix things.
    Aaron Conran
    @aconran

  3. #3
    Sencha Premium User
    Join Date
    Dec 2010
    Posts
    275
    Vote Rating
    9
      0  

    Default

    Did something change in 4.1? I was able to fix it by using the config option "header: false".

    I had thought that this was set by default if the title was not defined.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •