Results 1 to 2 of 2

Thread: Check Box Is not Displayed Correctly On first show in window

  1. #1

    Default Check Box Is not Displayed Correctly On first show in window

    I have a form that I use in different instances throughout my application. At the top of the form I have a container with a check box and label inside. My form displays correctly in every instance except when I use it in a window. The first time I open a window that uses my form my container seems to scrunch up every thing and aligns it to the left. My check box and label become stacked on each other. If I close and open the window the layout looks fine. I tried calling this.doLayout from the afterRender function in my form file, but this did not fix my issue. I am going to try calling the doLayout function from above the form in the reference chain next. If anyone has ideas I am all ears.

    First Show
    badBox.png

    Second Show
    goodBox.png

    Thanks.

    Code:
    Ext.ns('GLOBAL');
    GLOBAL.myForm1Ui = Ext.extend(Ext.form.FormPanel, {
        frame: true,
        padding: 5,
        labelWidth: 150,
        initComponent: function() {
            this.items = [
                {
                    xtype: 'container',
                    height: 25,
                    layout: 'hbox',
                    layoutConfig: {
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'spacer',
                            flex: 1,
                            width: 155
                        },
                        {
                            xtype: 'checkbox',
                            name: 'myCheckBx',
                            width: 15,
                            ref: '../myCheckBox'
                        },
                        {
                            xtype: 'label',
                            text: 'myLabel',
                            flex: 1,
                            margins: '5,0,0,0',
                            ref: '../myLabel'
                        }
                    ]
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    maxLength: 20,
                    maxLengthText: 'The maximum length of first name is 20 characters.',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '20'
                    },
                    enableKeyEvents: true,
                    vtype: 'foo',
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    allowBlank: false,
                    maxLength: 20,
                    maxLengthText: 'The maximum length of last name is 20 characters.',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '20'
                    },
                    enableKeyEvents: true,
                    vtype: 'foo',
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    emptyText: '',
                    name: 'foo',
                    maxLength: 20,
                    maxLengthText: 'The maximum length of middle name is 20 characters.',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '20'
                    },
                    enableKeyEvents: true,
                    vtype: 'foo',
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    maxLength: 40,
                    maxLengthText: 'The maximium length of this field is 40 characters.',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '40'
                    },
                    vtype: 'foo',
                    enableKeyEvents: true,
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'combo',
                    fieldLabel: 'Suffix',
                    anchor: '100%',
                    name: 'suffix',
                    mode: 'local',
                    store: 'foo',
                    displayField: 'text',
                    valueField: 'value',
                    triggerAction: 'all',
                    typeAhead: true,
                    forceSelection: true,
                    enableKeyEvents: true,
                    typeAheadDelay: 0,
                    ref: 'foo'
                },
                {
                    xtype: 'combo',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    store: 'foo',
                    displayField: 'text',
                    valueField: 'value',
                    triggerAction: 'all',
                    mode: 'local',
                    typeAhead: true,
                    forceSelection: true,
                    enableKeyEvents: true,
                    typeAheadDelay: 0,
                    ref: 'foo'
                },
                {
                    xtype: 'datefield',
                    fieldLabel: 'Date of Birth',
                    anchor: '100%',
                    name: 'dateOfBirth',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '10'
                    },
                    vtype: 'dobField',
                    altFormats: 'm/d/Y|mdY|n/j/Y',
                    invalidText: '{0} is not a valid date - it must be in the format  \'MM/DD/YYYY\'.',
                    maskRe: /[0-9\/]/i,
                    enableKeyEvents: true,
                    minValue: '01/01/1899',
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'datefield',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    vtype: 'foo',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '10'
                    },
                    altFormats: 'm/d/Y|mdY|n/j/Y',
                    invalidText: '{0} is not a valid date - it must be in the format \'MM/DD/YYYY\'.',
                    maskRe: /[0-9\/]/i,
                    enableKeyEvents: true,
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'ssn',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '11'
                    },
                    vtype: 'foo',
                    enableKeyEvents: true,
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'combo',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    mode: 'local',
                    store: 'foo',
                    displayField: 'text',
                    valueField: 'value',
                    triggerAction: 'all',
                    forceSelection: true,
                    typeAhead: true,
                    enableKeyEvents: true,
                    typeAheadDelay: 0,
                    ref: 'foo'
                },
                {
                    xtype: 'combo',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    mode: 'local',
                    store: 'foo',
                    displayField: 'text',
                    valueField: 'value',
                    triggerAction: 'all',
                    forceSelection: true,
                    typeAhead: true,
                    enableKeyEvents: true,
                    typeAheadDelay: 0,
                    ref: 'foo'
                },
                {
                    xtype: 'combo',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'category',
                    mode: 'local',
                    store: 'foo',
                    displayField: 'text',
                    valueField: 'value',
                    triggerAction: 'all',
                    forceSelection: true,
                    typeAhead: true,
                    enableKeyEvents: true,
                    vtype: 'foo',
                    typeAheadDelay: 0,
                    ref: 'foo'
                },
                {
                    xtype: 'combo',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    mode: 'local',
                    valueField: 'value',
                    displayField: 'text',
                    forceSelection: true,
                    typeAhead: true,
                    triggerAction: 'all',
                    vtype: 'foo',
                    enableKeyEvents: true,
                    typeAheadDelay: 0,
                    ref: 'foo'
                },
                {
                    xtype: 'foo',
                    fieldLabel: 'License #',
                    anchor: '100%',
                    name: 'foo',
                    vtype: 'foo',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '25'
                    },
                    enableKeyEvents: true,
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'datefield',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    vtype: 'foo',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '10'
                    },
                    altFormats: 'm/d/Y|mdY|n/j/Y',
                    invalidText: '{0} is not a valid date - it must be in the format  \'MM/DD/YYYY\'.',
                    maskRe: /[0-9\/]/i,
                    enableKeyEvents: true,
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'datefield',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    vtype: 'foo',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '10'
                    },
                    altFormats: 'm/d/Y|mdY|n/j/Y',
                    invalidText: '{0} is not a valid date - it must be in the format  \'MM/DD/YYYY\'.',
                    maskRe: /[0-9\/]/i,
                    enableKeyEvents: true,
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                },
                {
                    xtype: 'datefield',
                    fieldLabel: 'foo',
                    anchor: '100%',
                    name: 'foo',
                    autoCreate: {
                        tag: 'input',
                        type: 'text',
                        maxlength: '10'
                    },
                    altFormats: 'm/d/Y|mdY|n/j/Y',
                    invalidText: '{0} is not a valid date - it must be in the format  \'MM/DD/YYYY\'.',
                    maskRe: /[0-9\/]/i,
                    enableKeyEvents: true,
                    stripCharsRe: /^\s*/,
                    ref: 'foo'
                }
            ];
            GLOBAL.myForm1Ui.superclass.initComponent.call(this);
        }
    });

  2. #2

    Default

    There was code trying to hide the check box that was being called form an initComponent function that was higher up in the reference chain. Commenting out the code fixed the issue. I would think this would cause a javascript error or work correctly, not sure why this caused the label and check box to be out of allignment. In any case, I am all set. //this.Panel.DetailPanel.DetailPanel.Form.CheckBox.hide(); //this.Panel.DetailPanel.DetailPanel.Form.Label.hide();

Posting Permissions

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