1. #1
    Sencha User smares's Avatar
    Join Date
    Apr 2011
    Location
    Germany
    Posts
    25
    Vote Rating
    0
    smares is on a distinguished road

      0  

    Default Weird textfield border problem with non-resizable windows

    Weird textfield border problem with non-resizable windows


    Hey guys, I am having a weird problem with a textfield border disappearing when the parent window's resizable property is set to false. Here's my code for the window:

    Code:
    Ext.define('abc.view.Login', {
        extend: 'Ext.window.Window',
        
        alias: 'widget.login',
        
        autoShow: true,
        closable: false,
        draggable: false,
        modal: true,
        resizable: false,
        title : 'Login',
    
        initComponent: function() {
            this.items = [
                {
                    xtype: 'form',
                    
                    bodyPadding: 10,
                    
                    items: [
                        {
                            name : 'username',
                            xtype: 'textfield',
                            allowBlank: false,
                            fieldLabel: 'Username'
                        },
                        {
                            name : 'password',
                            xtype: 'textfield',
                            allowBlank: false,
                            fieldLabel: 'Password',
                            inputType: 'password'
                        },
                    ]
                }
            ];
    
            this.buttons = [
                {
                    text: 'Login',
                }
            ];
        
            this.callParent(arguments);
        }
    });
    It gets called by Viewport:

    Code:
    Ext.define('abc.view.Viewport', {
        extend: 'Ext.container.Viewport',
        
        requires: [
            'abc.view.Login'
        ],
        
        layout: 'fit',
        
        initComponent: function() {
            this.items = [
                {
                    xtype: 'login'
                }
            ];
        
            this.callParent(arguments);
        }
    });
    Viewport is used by my application:

    Code:
    Ext.application({
        name:                'abc',
    
        appFolder:            'cms',
        
        autoCreateViewport:    true,
    
        launch: function() {
        }
    });
    If I set resizable to true (or simply comment the line), both text fields have a border. If resizable is false, the last text field does not have a border. The problem appears to be caused by the fact that when resizable is false, the text field also has the class "x-viewport" which has "border: 0 none;".

    Is this a bug or am I doing something wrong?
    There are 10 types of people in this world: those who understand binary, and those who don't.

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    actually it is not a good practise to add window into items of a container since they are floating above it. so, i would just call:
    Code:
    Ext.create('abc.view.Login');
    since it has the autoShow config set to true.

    let me know if this does already fixes your sizing issue.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  3. #3
    Sencha User smares's Avatar
    Join Date
    Apr 2011
    Location
    Germany
    Posts
    25
    Vote Rating
    0
    smares is on a distinguished road

      0  

    Default


    Indeed, thanks!
    There are 10 types of people in this world: those who understand binary, and those who don't.

Thread Participants: 1