PDA

View Full Version : Not getting elements to hide or show depending on browser



Nontyper
24 Jul 2013, 7:54 AM
I am having a problem getting the following code to work in Safari and Chrome, It works excellent in IE and in FF. Anyone else had this problem or see a reason why it wouldn't work in these two browsers?


id: 'cb_Bath_Yes', xtype: 'checkbox',
itemCls: 'inputFld',
cellCls: 'cellTop',
checked: false,
listeners: {
check: function(this1, checked){
if (checked) {
Ext.getCmp('cb_Bath_No').setValue(false);
Ext.getCmp('fp_Bath_1').hide(true);
Ext.getCmp('lbl_Bath_1').hide(true);
}
else {
Ext.getCmp('fp_Bath_1').show(true);
Ext.getCmp('lbl_Bath_1').show(true);
}
}
}
},
{
xtype: 'label',
text: 'No'
},
{
id: 'cb_Bath_No',
xtype: 'checkbox',
itemCls: 'inputFld',
cellCls: 'cellTop',
checked: false,
listeners: {
check: function(this1, checked){
if (checked) {
Ext.getCmp('cb_Bath_Yes').setValue(false);
Ext.getCmp('fp_Bath_1').show(true);
Ext.getCmp('lbl_Bath_1').show(true);
}
else {
Ext.getCmp('fp_Bath_1').hide(true);
Ext.getCmp('lbl_Bath_1').hide(true);
}
}
}
},
]
}),

slemmon
25 Jul 2013, 9:39 PM
Are you saying the form fields / labels don't render in the panel? Or what issue are you seeing?

Nontyper
30 Jul 2013, 5:00 AM
Slemmon, the object is on the panel and it is hidden until you click the checkbox. When the checkbox is checked, I want to display or .show the item. This works fine in IE and in FF, but not in Safari and not in Chrome, so I would have to assume that the object is rendering, just not showing. I may be wrong in how I am interpreting your question tho..


thanks.

Here is the object code..


//----------------------------------------
// Bathroom Screen
var fp_Bath = new Ext.FormPanel({
id: 'fp_Bath',
frame: true,
hidden: true,
title: 'Bathrooms',
defaultType: 'textfield',
labelWidth: 155,
buttonAlign: 'center',
items: [{
id: 'lbl_Bath',
xtype: 'label',
bodyCfg: {tag:'center', cls:'x-panel-body'},
bodyCssClass: 'welcomeText',
border: false
},new Ext.Panel({
frame: true,
defaultType: 'textfield',
labelWidth: 250,
layout: 'table',
layoutConfig: {
columns: 5
},
items: [
{
xtype: 'label',
text: 'County data indicates your total bathrooms are: '
},
{
xtype: 'label',
text: 'Full Baths '
},
{
id: 'fld_Gen_DbFB',
itemCls: 'displayFld',
disabled: true,
width: 50,
cellCls: 'cellTop'
},
{
xtype: 'label',
text: 'Half Baths '
},
{
id: 'fld_Gen_DbHB',
itemCls: 'displayFld',
disabled: true,
width: 50,
cellCls: 'cellTop'
}
]
}),
new Ext.Panel({
frame: true,
defaultType: 'textfield',
labelWidth: 250,
layout: 'table',
layoutConfig: {
columns: 5
},
items: [
{
id: 'lbl_Gen_Bath',
xtype: 'label',
text: 'Is this correct? '
},
{
xtype: 'label',
text: ' Yes'
},
{
id: 'cb_Bath_Yes',
xtype: 'checkbox',
itemCls: 'inputFld',
cellCls: 'cellTop',
checked: false,
listeners: {
check: function(this1, checked){
if (checked) {
Ext.getCmp('cb_Bath_No').setValue(false);
Ext.getCmp('fp_Bath_1').hide(true);
Ext.getCmp('lbl_Bath_1').hide(true);
}
else {
Ext.getCmp('fp_Bath_1').show(true);
Ext.getCmp('lbl_Bath_1').show(true);
}
}
}
},
{
xtype: 'label',
text: 'No'
},
{
id: 'cb_Bath_No',
xtype: 'checkbox',
itemCls: 'inputFld',
cellCls: 'cellTop',
checked: false,
listeners: {
check: function(this1, checked){
if (checked) {
Ext.getCmp('cb_Bath_Yes').setValue(false);
Ext.getCmp('fp_Bath_1').show(true);
Ext.getCmp('lbl_Bath_1').show(true);
}
else {
Ext.getCmp('fp_Bath_1').hide(true);
Ext.getCmp('lbl_Bath_1').hide(true);
}
}
}
}
]
}),
{
id: 'lbl_Bath_1',
xtype: 'label',
bodyCssClass: 'welcomeText',
hidden: true
},new Ext.Panel({
id: 'fp_Bath_1',
hidden: true,
defaultType: 'textfield',
labelWidth: 250,
layout: 'table',
layoutConfig: {
columns: 5
},
items: [
{
id: 'lbl_Bath_In',
xtype: 'label',
text: 'If no, please enter the correct bathroom count '
},
{
id: 'lbl_FB_In',
xtype: 'label',
text: 'Full Baths '
},{
id: 'fld_FB_In',
width: 90,
xtype: 'numberfield',
maxLength: 5,
itemCls: 'displayFld',
cellCls: 'cellTop'
},
{
id: 'lbl_HB_In',
xtype: 'label',
text: 'Half Baths '
},{
id: 'fld_HB_In',
width: 90,
xtype: 'numberfield',
maxLength: 3,
itemCls: 'displayFld',
cellCls: 'cellTop'
}
]
})
]
});

slemmon
30 Jul 2013, 9:39 AM
Checkboxes don't have a 'check' event. You can listen to the 'change' event instead and getValue() will return whether the checkbox is checked or not.