Results 1 to 2 of 2

Thread: [CLOSED][B3] FormPanel buttons styling

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium User westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    1,038
    Vote Rating
    108
      0  

    Default [CLOSED][B3] FormPanel buttons styling

    In beta2 the buttons for a FormPanel in a Window had a suitable background, matching the panel.
    Now it's white, i.e. the default window background.
    FormPanel Button Styling.PNG

    Code:
    Ext.define('Blah.view.LoginPanel', {
        extend: 'Ext.form.FormPanel',
    
        config: {
            loginFunction: undefined,
            callback: undefined,
            callbackScope: undefined
        },
    
        frame: true,
        border: false,
    
        cls: 'loginPanel',
    
        bodyPadding: 10,     // FIXME: Shouldn't need this when SASS compiles again, so can pick up style...
    
        layout: 'anchor',
        defaults: {
            anchor: '100%',
            labelSeparator: ' :',
            labelWidth: 80
        },
    
        defaultType: 'textfield',
        items: [
            {
                xtype: 'numberfield',
                minValue: 0, //prevents negative numbers
    
                // Remove spinner buttons, and arrow key and mouse wheel listeners
                hideTrigger: true,
                keyNavEnabled: false,
                mouseWheelEnabled: false,
                
                fieldLabel: 'Client Code',
                name: 'clientId',
                allowBlank: false,
                allowDecimals: false
            },
            {
                fieldLabel: 'Username',
                name: 'username',
                allowBlank: false
            },
            {
                inputType: 'password',
                fieldLabel: 'Password',
                name: 'password',
                allowBlank: false
            }
        ],
    
        buttons: [
            {
                text: 'Submit',
                formBind: true, // only enabled once the form is valid
                disabled: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        // getValues returns strings, so need to call getValue instead.
                        form.owner.getLoginFunction().call(
                            form.owner.getCallbackScope(),
                            form.findField('clientId').getValue(),
                            form.findField('username').getValue(),
                            form.findField('password').getValue(),
                            form.owner.getCallback()
                        );
    
                        var win = this.up('window');
                        if (win) {
                            win.close();
                        }
                    }
                }
            }
        ],
    
        constructor: function(config) {
            this.initConfig(config);
            this.callParent(arguments);
        }
    });
    Code:
    Ext.define('Blah.view.LoginWindow', {
        extend: 'Ext.window.Window',
    
        requires: [
            'Blah.view.LoginPanel'
        ],
    
        title: 'Login',
        width: 270,
        frame: false,
    
        config: {
            loginFunction: undefined,
            callback: undefined,
            callbackScope: undefined
        },
    
        constructor: function(config) {
            this.initConfig(config);
            this.callParent(arguments);
        },
    
        initComponent: function() {
            this.loginPanel = Ext.create('Blah.view.LoginPanel', {
                loginFunction: this.getLoginFunction(),
                callback: this.getCallback(),
                callbackScope: this.getCallbackScope()
            });
    
            this.items = [this.loginPanel];
    
            this.callParent(arguments);
        },
    
        listeners: {
            afterrender: function(form) {
                var field = form.down('field');
                if (field) {
                    field.focus(true);
                }
            }
        }
    });
    Cheers,
    Westy

  2. #2
    Sencha Premium User westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    1,038
    Vote Rating
    108
      0  

    Default

    Finally rebuilt SCSS, and now have a background, albeit a little odd... but it'll do for now
    FormPanel Button Styling - fixedish.PNG


    Can close this one then, thanks.


    Edit: Updated compass/sass and sorted my config.rb, now looks fine.

Similar Threads

  1. Replies: 14
    Last Post: 3 Mar 2011, 6:58 AM
  2. Replies: 9
    Last Post: 17 Aug 2009, 12:12 AM
  3. Forms: Styling Buttons and Fields
    By Clever Cutter in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 2 Sep 2007, 4:17 AM

Posting Permissions

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