PDA

View Full Version : Check Box Is not Displayed Correctly On first show in window



Kachopsticks
26 Mar 2014, 7:50 AM
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
48460

Second Show
48461

Thanks.



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);
}
});

Kachopsticks
27 Mar 2014, 7:43 AM
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();