PDA

View Full Version : Dependency of multiple checkbox groups on a combination of 2 ComboBoxes values



sanjitbuzz
20 Nov 2013, 11:42 AM
Hi
So there are two comboboxes with multiple values. And there are many checkbox groups which are dependent on various combination of the values in the comboboxes. I have written the code but it is not working. I cant figure it out. BTW the code is going to be loaded to a visualforce page. Thanks for any help guys.



Ext.define('ABCController',{
extend : 'Ext.app.Controller',
recordId: null,
form: null,
init : function(){
var me = this;

eventBus.on('validateAppOrResourceForm',me.validateFormForContainer,this);


var userTypes = [
['AA'],
['BB']
];
var sites = [
['11'],
['22'],
['33']
];

Ext.define('ABC.model.UserType', {
extend: 'Ext.data.Model',
fields: ['userType']
});
Ext.define('ABC.model.Site', {
extend: 'Ext.data.Model',
fields: ['site']
});


var userTypeStore = new Ext.data.Store({
model: 'ABC.model.UserType',
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: userTypes
});
sitesStore = new Ext.data.Store({
model: 'ABC.model.Site',
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: sites
});

me.userTypeCombo = Ext.create(Ext.form.ComboBox,{
xtype: 'combobox',
fieldLabel: 'User Type',
id:'userTypeComboId',
name: 'userType',
labelAlign: 'side',
store:userTypeStore,
valueField: 'userType',
displayField: 'userType',
typeAhead: true,
forceSelection: true,
allowBlank: false,
editable: true,
listeners:{

select: function( combo, records, eOpts ){
var sitesCombo = Ext.getCmp('sitesComboId');
if( !Ext.isEmpty(combo.getValue() )){

showOrHideRadioGroups(combo.getValue() , sitesCombo.getValue());
}

}
}
});
me.sitesCombo = Ext.create(Ext.form.ComboBox,{
xtype: 'combobox',
fieldLabel: 'Site',
id:'sitesComboId',
name: 'site',
labelAlign: 'side',
store: sitesStore,
valueField: 'site',
displayField: 'site',
typeAhead: true,
forceSelection: true,
allowBlank: false,
editable: true,
listeners:{

select: function( combo, records, eOpts ){
var userTypeCombo = Ext.getCmp('userTypeComboId');
var sectionCheckboxGroup1 = Ext.getCmp('sectionCheckboxGroup1Id');
var sectionCheckboxGroup2 = Ext.getCmp('sectionCheckboxGroup2Id');
var sectionCheckboxGroup3 = Ext.getCmp('sectionCheckboxGroup3Id');
var sectionCheckboxGroup4 = Ext.getCmp('sectionCheckboxGroup4Id');
var sectionCheckboxGroup5 = Ext.getCmp('sectionCheckboxGroup5Id');
if( !Ext.isEmpty(combo.getValue())){

showOrHideRadioGroups( userTypeCombo.getValue(),combo.getValue());
}

//
var siteVal = combo.getValue();
var userTypeVal = userTypeCombo.getValue();
var values1 = sectionCheckboxGroup2.getValue();
var values;
if(!Ext.isArray(values1.section2)){
values = new Array();
values.push(values1.section2);
}else{
values = values1.section2;
}
if(!Ext.isEmpty(values) && !Ext.isEmpty(values) && Ext.Array.contains(values,'recordsManager') &&
!Ext.isEmpty(userTypeVal) && userTypeVal =='AA' &&
!Ext.isEmpty( siteVal ) && ( siteVal == '11' || siteVal == '22')){
sectionCheckboxGroup1.hide();
sectionCheckboxGroup4.show();
sectionCheckboxGroup3.hide();
sectionCheckboxGroup5.hide();

}else if(!Ext.isEmpty(values) && !Ext.isEmpty(values) && Ext.Array.contains(values,'recordsManager') &&
!Ext.isEmpty(userTypeVal) && userTypeVal =='11' &&
!Ext.isEmpty( siteVal ) && ( siteVal == '33')){
sectionCheckboxGroup1.hide();
sectionCheckboxGroup4.hide();
sectionCheckboxGroup2.hide();
sectionCheckboxGroup5.show();
}else{
sectionCheckboxGroup5.hide();
sectionCheckboxGroup4.hide();
}

}
}

});
showOrHideRadioGroups = function( userTypeVal, siteVal ){
var sectionCheckboxGroup1 = Ext.getCmp('sectionCheckboxGroup1Id');
var sectionCheckboxGroup2 = Ext.getCmp('sectionCheckboxGroup2Id');
var sectionCheckboxGroup3 = Ext.getCmp('sectionCheckboxGroup3Id');
var sectionCheckboxGroup4 = Ext.getCmp('sectionCheckboxGroup4Id');
var sectionCheckboxGroup5 = Ext.getCmp('sectionCheckboxGroup5Id');

if( !Ext.isEmpty(userTypeVal) && !Ext.isEmpty(siteVal)){

if( userTypeVal =='BB' ){
sectionCheckboxGroup1.show();
sectionCheckboxGroup2.hide();
sectionCheckboxGroup3.hide();
sectionCheckboxGroup4.hide();
sectionCheckboxGroup5.hide();

}else if( userTypeVal =='AA' ){

if( siteVal == '11' || siteVal == '22' || siteVal == '33' ){
sectionCheckboxGroup1.hide();
sectionCheckboxGroup2.show();
sectionCheckboxGroup3.hide();
sectionCheckboxGroup4.hide();
sectionCheckboxGroup5.hide();
}else if ( siteVal == 'Irvine'){
sectionCheckboxGroup1.hide();
sectionCheckboxGroup2.hide();
sectionCheckboxGroup3.show();
sectionCheckboxGroup4.hide();
sectionCheckboxGroup5.hide();

}
}
}

};

me.sectionCheckboxGroup1 = Ext.create(Ext.form.CheckboxGroup,{
xtype: 'checkboxgroup',
fieldLabel: 'Section-1',
id:'sectionCheckboxGroup1Id',
hidden: true,
columns: 1,
vertical: true,
items: [{
xtype: 'checkboxfield',
name: 'section1',
boxLabel: 'Browser1',
inputValue: 'browser1'
},
{
xtype: 'checkboxfield',
name: 'section1',
boxLabel: 'Browser2',
inputValue: 'browser2'
}]
});

me.sectionCheckboxGroup2 = Ext.create(Ext.form.CheckboxGroup,{
xtype: 'checkboxgroup',
fieldLabel: 'Section-2',
id:'sectionCheckboxGroup2Id',
hidden: true,
columns: 1,
vertical: true,
items: [{
xtype: 'checkboxfield',
name: 'section2',
boxLabel: 'Admin',
inputValue: 'admin'
},
{
xtype: 'checkboxfield',
name: 'section2',
boxLabel: 'Controller',
inputValue: 'controller'
},{
xtype: 'checkboxfield',
name: 'section2',
boxLabel: 'Records Manager',
inputValue: 'recordsManager'
}],
listeners:{

change: function( obj, newValue, oldValue, eOpts ) {
var sectionCheckboxGroup1 = Ext.getCmp('sectionCheckboxGroup1Id');
var sectionCheckboxGroup2 = Ext.getCmp('sectionCheckboxGroup2Id');
var sectionCheckboxGroup3 = Ext.getCmp('sectionCheckboxGroup3Id');
var sectionCheckboxGroup4 = Ext.getCmp('sectionCheckboxGroup4Id');
var sectionCheckboxGroup5 = Ext.getCmp('sectionCheckboxGroup5Id');
var siteVal = me.sitesCombo.getValue();
var userTypeVal =me.userTypeCombo.getValue();
var values1 = obj.getValue();
var values;
if(!Ext.isArray(values1.section2)){
values = new Array();
values.push(values1.section2);
}else{
values = values1.section2;
}
if(!Ext.isEmpty(values) && !Ext.isEmpty(values) && Ext.Array.contains(values,'recordsManager') &&
!Ext.isEmpty(userTypeVal) && userTypeVal =='Record manger/Administrator' &&
!Ext.isEmpty( siteVal ) && ( siteVal == 'Ettlingen' || siteVal == 'Marlow' || siteVal == 'Paris' )){
sectionCheckboxGroup1.hide();
sectionCheckboxGroup4.show();
sectionCheckboxGroup3.hide();
sectionCheckboxGroup5.hide();

}else{
sectionCheckboxGroup4.hide();
}

}
}
});
me.sectionCheckboxGroup3 = Ext.create(Ext.form.CheckboxGroup,{
xtype: 'checkboxgroup',
fieldLabel: 'Section-3',
id:'sectionCheckboxGroup3Id',
hidden: true,
columns: 1,
vertical: true,
items: [{
xtype: 'checkboxfield',
name: 'section3',
boxLabel: 'Admin',
inputValue: 'admin'
},
{
xtype: 'checkboxfield',
name: 'section3',
boxLabel: 'Controller',
inputValue: 'controller'
},{
xtype: 'checkboxfield',
name: 'section3',
boxLabel: 'Records Manager',
inputValue: 'recordsManager'
}],
listeners:{

change: function( obj, newValue, oldValue, eOpts ) {
var sectionCheckboxGroup1 = Ext.getCmp('sectionCheckboxGroup1Id');
var sectionCheckboxGroup2 = Ext.getCmp('sectionCheckboxGroup2Id');
var sectionCheckboxGroup3 = Ext.getCmp('sectionCheckboxGroup3Id');
var sectionCheckboxGroup4 = Ext.getCmp('sectionCheckboxGroup4Id');
var sectionCheckboxGroup5 = Ext.getCmp('sectionCheckboxGroup5Id');
var siteVal = me.sitesCombo.getValue();
var userTypeVal =me.userTypeCombo.getValue();
var values1 = obj.getValue();
var values;
if(!Ext.isArray(values1.section3)){
values = new Array();
values.push(values1.section3);
}else{
values = values1.section3;
}
if(!Ext.isEmpty(values) && !Ext.isEmpty(values) && Ext.Array.contains(values,'recordsManager') &&
!Ext.isEmpty(userTypeVal) && userTypeVal =='Record manger/Administrator' &&
!Ext.isEmpty( siteVal ) && ( siteVal == 'Irvine')){
sectionCheckboxGroup1.hide();
sectionCheckboxGroup4.hide();
sectionCheckboxGroup2.hide();
sectionCheckboxGroup5.show();

}else{
sectionCheckboxGroup5.hide();
}

}
}
});
me.sectionCheckboxGroup4 = Ext.create(Ext.form.CheckboxGroup,{
xtype: 'checkboxgroup',
fieldLabel: 'Section-4',
id:'sectionCheckboxGroup4Id',
hidden: true,
columns: 1,
vertical: true,
items: [{
xtype: 'checkboxfield',
name: 'section4',
boxLabel: 'Site',
inputValue: 'site'
}]
});
me.sectionCheckboxGroup5 = Ext.create(Ext.form.CheckboxGroup,{
xtype: 'checkboxgroup',
fieldLabel: 'Section-5',
id:'sectionCheckboxGroup5Id',
hidden: true,
columns: 1,
vertical: true,
items: [{
xtype: 'checkboxfield',
name: 'section5',
boxLabel: 'Copy1',
inputValue: 'copy1'
},
{
xtype: 'checkboxfield',
name: 'section5',
boxLabel: 'Copy2',
inputValue: 'copy2'
}]
});



me.form=Ext.create('Ext.form.Panel',{
bodyPadding: 10,
width: 550,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 90,
msgTarget: 'qtip'
},
items: [
me.userTypeCombo,
me.sitesCombo,
me.sectionCheckboxGroup1,
me.sectionCheckboxGroup2,
me.sectionCheckboxGroup3,
me.sectionCheckboxGroup4,
me.sectionCheckboxGroup5

]
});

me.container.add(me.form);
if(formDeveloperMode)
eventBus.fireEvent('newAppOrResourceTabLoaded');

},

validateFormForContainer : function(){
var me = this,invalidArray=[Ext.getClassName(me),[]];
var i=0;
me.container.down('form').getForm().getFields().filterBy(function(field) {
if(!field.isValid()){
invalidArray[1][i]='ABC: '+field.fieldLabel;
i++;
}
});
eventBus.fireEvent('appOrResourceFormValidationResponse',invalidArray);
return invalidArray;
},


});

scottmartin
22 Nov 2013, 6:26 AM
Please create a working example at:
https://fiddle.sencha.com/#home

Also .. you are extending a controller for this? Why not a view? You should use a control only to handle the actions.

sanjitbuzz
22 Nov 2013, 12:46 PM
Thanks for looking over it, Scott. We are indeed extending a controller over it in salesforce. Unfortunately I am not able to create a working example. I feel the problem in the code lie in these lines.

if(!Ext.isEmpty(values) && !Ext.isEmpty(values) && Ext.Array.contains(values,'recordsManager') &&
!Ext.isEmpty(userTypeVal) && userTypeVal =='AA' &&
!Ext.isEmpty( siteVal ) && ( siteVal == '11' || siteVal == '22'))


else if(!Ext.isEmpty(values) && !Ext.isEmpty(values) && Ext.Array.contains(values,'recordsManager') &&
!Ext.isEmpty(userTypeVal) && userTypeVal =='11' &&
!Ext.isEmpty( siteVal ) && ( siteVal == '33'))

46972