PDA

View Full Version : Show and hide components on load



nbenja
25 Jul 2014, 5:34 AM
Hi All,

I am 1 week old to EXTJs framework, currently i am stuck with show and hide function on load, i was able to do this changes (show and hide components) when click on radio button after the form load. However i need to hide based on the value when form loads

ex: radio button value "YES" then i need to display combobox else hide the combo

here is the code

var noMCFlag _YES = false;
var noMCFlag _NO = true;
var noMCFlag =record.get('MCFlag');
if(noMCFlag == true) {
noMCFlag _YES = true;
noMCFlag = false;
}

var row4={
layout:'column',
baseCls:baseClass,
items: [ {
columnWidth: .5,
layout: 'form',
defaultType: 'radio',
defaults: defaults,
baseCls: 'hmc-noborder-panel',
items: [ {
xtype: 'radiogroup',
fieldLabel:'Memeber Communication',
labelStyle: 'font-weight:bold;width:160px',
width: 100,
items: [{
name: 'memCommu',
boxLabel: 'Yes',
inputValue: 'Y',
checked: noMCFlag _YES,
listeners: {
check: function() {
if (this.checked) {
Ext.getCmp('ReasonId').hide(true);
}
}
}
},{
name: 'memCommu',
boxLabel: 'No',
inputValue: 'N',
checked: noMCFlag _NO,
listeners: {
check: function() {
if (this.checked) {
Ext.getCmp('ReasonId').show();
}
}
}
}]

}]
},{
columnWidth: .5,
id: 'ReasonId',
layout: 'form',
defaults: defaults,
baseCls:'hmc-noborder-panel',
items: [{
xtype: 'combo',
id: Ext.id(),
hiddenName: 'reason',
store: [['Sam1','Sample1'],['Sam2','Sample2'],['Sam3','Sample3']],
selectOnFocus:true,
labelStyle:'font-weight:bold;',
emptyText:'Select Reason...'
}]
}]
};

Appreciate all your help

slemmon
28 Jul 2014, 1:51 PM
Hi,

Instead of using the check event try using the change event and then evaluate the value at time the change event is fired.

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.Radio-event-change