Results 1 to 4 of 4

Thread: In popup window, every FormPanel's buttons are partially occluded

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default In popup window, every FormPanel's buttons are partially occluded

    I never see this on my 15 inch MacBook Pro (Retina screen), in any browser.

    But on my 13 inch MacBook Pro, I see this problem in Safari and Chrome, both WebKit browsers. In FireFox, it works fine every time.

    I'm including a screen capture below; look at the bottom, you can see what looks like a button occluding maybe 60% of the toolbar buttons:

    Screen shot 2013-03-15 at 2.08.22 PM.png

    I first started seeing this in 4.1.3, now I see it still in 4.2.0.663. Actually, I should saw I first *noticed* it in 4.1.3.

    Another oddity: if I put 'collapsible: true' in the FormPanel, and then collapse/expand the panel after it is rendered, that thing (whatever it is) goes away. This leads me to believe it's a ExtJS framework bug, but I'm not 100% sure.

    I have a number of form panels, and they all have this problem. I have a base class from which they are all derived, and I've gone through and commented out various things looking for the culprit but haven't found it so far.

    I also tried looking in the DOM inspector (for example, the Elements tab in Chrome) in the browsers, but it doesn't seem to exist as far as the inspector is concerned. I rather like FireFox's active inspector better, where you can hover the mouse over the object of interest, and the appropriate html will be highlighted below, but as the problem doesn't occur in FireFox I can't use that tool.

    Does anyone have any ideas about what it is, where it comes from, how to get rid of it? Any ideas at all, will be gratefully accepted.

    Brian

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    Answers
    759

    Default

    Impossible to say without seeing some code.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default

    There's quite a lot of code, so I was hesitant to just post a bunch of it. Is there anything in particular you're interested in?

    I can think of three possibilities:

    - base class
    - subclass
    - code that launches the popup Window

    I'm pretty sure the Window class isn't involved though, since putting 'collapsible: true' on the formpanel fixes it (if i collapse/expand the formpanel).

    So here's the base class:

    Code:
    Ext.define('VFABRIC.form.BaseFormPanel', {
        extend: 'Ext.form.Panel',
        alias: 'widget.baseformpanel',
    
    
        requires: [
            'VFABRIC.util.MsgBox',
        ],
        
        height: Globals.DIALOG_HEIGHT,
        width: Globals.DIALOG_WIDTH,
    //    msgTarget: 'under',      // where to put error messages
    //    collapsible: true,
    
    
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
    
    
        bodyPadding: 10,
    //    style: { padding: '10px' },
        submitValue: false,
        autoScroll: true,
      
        // Have a configuration property that subclasses can set to tell us what
        // function to call from the keyNav handler -- and what type of field to
        // attach the keyboard navigator to.
        config: {
            keyNavHandler: null,
            keyNavFieldXtype: 'textfield',
        },
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
    
    
                listeners: {
                    // After the form is laid out, set focus to the text field and set up
                    // a keyboard listener so we can handle return (run handler for Create button).
                    'afterlayout': function(form, layout, options) {
                        var field = form.down(me.keyNavFieldXtype);
                        field.focus('', 50);
    
    
                        me.keyNav = Ext.create('Ext.util.KeyNav', this.el, {                    
                            enter: this.handleKeyNavReturn,
                            scope: me
                        });
                    },
                },
    
    
                fieldDefaults: {
                    anchor: '100%',
    //                margins: '5 5 5 5',
                    labelAlign: 'left', // 'top',
                    labelPad: 10,       // Bug in ExtJs, this doesn't seem to have any effect.
            //      labelWidth: 100,
            //        labelStyle: 'font-weight:bold',
                    allowBlank: false,
                    afterLabelTextTpl: '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>',
                },
    
    
            });
    
    
            me.buttons = me.createButtons();
            me.callParent(arguments);
        },
    
    
        createButtons: function() {
            return [
                {
                    text: 'Reset',
                    tooltip: 'Reset the form to defaults',
                    handler: function() {
                        VFABRIC.form.BaseFormPanel.resetMyForm(this);
                    },
                },
                {
                    text: 'Cancel',
                    tooltip: 'Dismiss the window without saving changes',
                    handler: function() {
                        VFABRIC.form.BaseFormPanel.closeWindow(this);
                    },
                },
                ];
        },
    
    
        handleKeyNavReturn: function() {
            var myButton = this.ownerCt.down('button');
    
    
            this.keyNavHandler.call(this, myButton);
        },
    
    
        getProductCombo: function() {
            var me = this;
                form = me.getForm();
    
    
            // If we can't find the form, return an empty string for now.
            if (form === undefined || form === null) {
                return Globals.EMPTY_STR;
            }
    
    
            var prodCombo = form.findField(Globals.POINTPRODUCTSCOMBO_ID);
            
            return prodCombo;
        },
    
    
        // Function to get the product selected, IFF the Product combo is present.
        getInternalProductSelected: function() {
            return this.getProductCombo().getInternalValue();
        },
        
        // Function to get the product selected, IFF the Product combo is present.
        getDisplayProductSelected: function() {
            return this.getProductCombo().getValue();
        },
        
        displayNoObjectsFoundError: function(msg, stepNum) {
            var me = this,
                myFunction = this.closeWindowShowWizard,
                myScope = me;
    
    
            if (Globals.QUICKSTARTWIZARD_RUNNING) {
                myFunction = null;
                myScope = null;
                msg += 'Please return to the Quick Start Wizard and go to step number ' + stepNum + '.';
            }
            else {
                msg += 'The Quick Start Wizard will be launched so you can remedy this.';
                VFABRIC.util.DomStorage.setLocalValue(Globals.QUICKSTARTWIZARD_STARTINGSTEP_STR, stepNum);
            }
    
    
            VFABRIC.util.MsgBox.showErrorDelayed('No records found', msg, myFunction, myScope);
        },
        
        closeWindowShowWizard: function() {
            VFABRIC.form.BaseFormPanel.closeWindow(this);
            Globals.showFormForMenu(Globals.MAIN_QUICKSTARTWIZARDMENU_ID);
        },
        
        statics: {
            // Returns the form from the given scope (needs to be a
            // child window of the form).
            getMyForm: function(myScope) {
                return myScope.up('form').getForm();
            },
    
    
            // Returns the panel (the panel that contains the form) from the
            // given scope (needs to be a child window of the form).
            getMyPanel: function(myScope) {
                return myScope.up('panel');
            },
    
    
            resetMyForm: function(control) {
                this.getMyForm(control).reset();
            },
            
            // Close the window.
            closeWindow: function(control) {
                control.up('window').destroy();
            },
            
            hideMyPanel: function(myForm) {
                myForm.up('window').hide();
            },
    
    
            unHideMyPanel: function(myForm) {
                myForm.up('window').show();
            },
    
    
            // Reset the form and close the window.
            resetFormCloseWindow: function(control) {
                this.resetMyForm(control);
                this.closeWindow(control);
            },
    
    
            getFormValues: function(form) {
                return form.getValues();
            },
        },
    
    
    });
    And a subclass:

    Code:
    var FILEUPLOADFIELD_ID = 'FileUploadField',
        VERSIONTEXT_ID = 'VersionText';
    
    
    Ext.define('VFABRIC.form.UploadImageFormPanel', {
        extend: 'VFABRIC.form.BaseFormPanel',
        alias: 'widget.uploadimageformpanel',
        
        requires: [
            'VFABRIC.form.BaseFormPanel',
            'VFABRIC.form.PointProductsCombo',
            'VFABRIC.util.StatusBarWrapper',
            'VFABRIC.util.AjaxWrapper',
        ],
        
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
    
    
                fieldDefaults: {
                    anchor: '100%',
                    labelAlign: 'left', // 'top',
                    labelPad: 10,
                    allowBlank: false,
                },
    
    
                items: [
                    {
                        xtype: 'pointproductscombo',
                        submitValue: false,
                    },
                    {
                        xtype: 'filefield',
                        emptyText: 'Select an image to upload',
                        fieldLabel: 'Image',
                        buttonText: 'Browse',
                        name: FILEUPLOADFIELD_ID,
                        buttonConfig: {
                            iconCls: 'upload-icon',
                        },
                        listeners: {
                            'change': function(button, value) {
                                var form = me.getForm(),
                                    file = me.getUploadFileName(form),
                                    text = form.findField(VERSIONTEXT_ID),
                                    splits = null,
                                    versTxt = '';
                                    
                                    if (file.indexOf('-') > 0) {
                                        splits = file.split('-');
                                        
                                        if (splits.length > 1) {
                                            var numStr;
                                            
                                            // Figure out which element has the version string.  Start at the
                                            // end and work backward.
                                            for (var i = splits.length - 1; i >= 0; i--) {
                                                if (splits [i].match(Globals.VERSION_REGEX)) {
                                                    numStr = versTxt = splits [i];
                                                    break;
                                                }
                                            }
    
    
                                            // Strip off the extension if necessary.
                                            for (var i = 0; i < Globals.installImageExts.length; i++) {
                                                var foundExt = numStr.lastIndexOf(Globals.installImageExts [i]);
                                                
                                                if (foundExt == numStr.length - Globals.installImageExts [i].length) {
                                                    versTxt = numStr.substring(0, foundExt);
    
    
                                                    // If there's not even one digit in the name, then reset the text
                                                    // to blank to force the user to enter it manually.
                                                    if (! versTxt.match(Globals.DIGIT_FOUND_MATCH)) {
                                                        versTxt = '';
                                                    }
    
    
                                                    break;
                                                }
                                            }
                                        }
                                    }
                                    
                                    // Set the version string we got into the textfield.
                                    text.setValue(versTxt);
                            }
                        },
                    },
                    {
                        xtype: 'textfield',
    //                    hidden: true,
                        emptyText: 'Enter version of image',
                        fieldLabel: 'Version',
                        name: VERSIONTEXT_ID,
    //                    validateOnChange: false,
                        validator: function(currValue) {
                            // Executing this validator causes the text field to lose focus, put it back
                            // in case the user was typing.
                            this.focus();
    
    
                            if (currValue === undefined || currValue == null || currValue == '' ||
                                currValue == 'Enter version of image') {
                                return 'The Version field must not be empty';
                            }
    
    
                            if (! currValue.match(Globals.DIGIT_FOUND_MATCH)) {
                                return 'The version field must contain at least one number';
                            }
                            
                            return true;
                        },
                    },
                ],
    
    
            });
    
    
            me.callParent(arguments);
             
            // Tell our base class keyNav handler what function to call if the user hits Return.
            me.setKeyNavHandler(uploadImage);
       },
       
       createButtons: function() {
           var me = this;
           
           return [
                {
                    text: 'Upload',
                    tooltip: 'Upload the install image specified to the server',
                    handler: uploadImageButton,
                }
                ].concat(me.callParent());
       },
       
       getUploadFileName: function(form) {
           var  fileField = form.findField(FILEUPLOADFIELD_ID),
                fileEl = fileField.fileInputEl.dom,
                file = fileEl.files [0];
                
            return file.name;
       },
    });
    
    
    function uploadImage(scope) {
        var form = VFABRIC.form.BaseFormPanel.getMyForm(scope),
            me = this,
            prodCombo = form.findField(Globals.POINTPRODUCTSCOMBO_ID),
            prodName = prodCombo.getInternalValue(),
            myUrl = Globals.generateInstallImageUrlForProduct(prodName),
            fileField = form.findField(FILEUPLOADFIELD_ID),
            fileEl = fileField.fileInputEl.dom,
            versTxt = form.findField(VERSIONTEXT_ID);
    
    
        if (form.isValid()) {
            VFABRIC.form.BaseFormPanel.closeWindow(scope);
            VFABRIC.util.AjaxWrapper.uploadInstallImage(versTxt.getValue(), myUrl, fileEl.files [0]);
        }
    }
    
    
    function uploadImageButton() {
        uploadImage(this);
    }
    Thank you,

    Brian

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default

    Anyone have any ideas how to even just figure out what this is?

Posting Permissions

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