I'm trying to set the checked state of an ExtJS 6.2 radiofield dynamically when a window is loaded for editing user information.
My window code is as follows
Ext.define('scim.view.users.EditUserWdw', {
extend: 'Ext.window.Window',
alias: 'widget.EditUserWdw',
id: 'editUserWdw',
required: [
'scim.view.users.UserController',
'Ext.form.Panel'
],
width: 400,
listeners: {
beforeclose: function (wdw) {
var frm = this.down('form');
if (frm.isDirty()) {
Ext.Msg.show({
title: 'Confirm Cancel',
msg: '<p>You started editing a user. Closing this window now will cause you to lose any information you changed.</p><p>Are you sure?</p>',
icon: Ext.Msg.QUESTION,
buttons: Ext.Msg.YESNO,
fn: function (ans) {
if (ans == 'yes') {
frm.reset();
wdw.close();
}
}
});
return false;
} else {
return true;
}
}
},
items: [{
xtype: 'form',
reference: 'form',
id: 'editUserFrm',
border: false,
style: 'background-color: #fff',
url: '/scim_libs/Users.php?metho=updateUser&userId=' + sessionStorage.userId,
padding: 5,
bbar: ['->', {
xtype: 'button',
text: 'Update User',
iconCls: 'x-fa fa-save',
handler: function () {
var frm = this.up('form');
if (frm.isValid()) {
frm.submit({
success: function (frm, response) {
var jData = Ext.util.JSON.decode(response.resposnse.responseText);
if (jData.status == "duplicate") {
Ext.Msg.show({
title: 'Duplicate Email',
msg: '<p>The email address <strong>' + Ext.getCmp('editUserEmail').getValue() + '</strong> is already used by another user.</p><p>Please use a different email address and try adding the user again.</p>',
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK,
closable: false,
fn: function () {
Ext.getCmp('editUserEmail').focus();
this.close();
}
})
}
else if (jData.status == "success") {
Ext.getStore('User').load();
Ext.Msg.show({
title: 'User Added',
msg: '<p>The user <strong>' + Ext.getCmp('editUserFirstName').getValue() + ' ' + Ext.getCmp('addUserLastName').getValue() + '</strong> has been updated successfully.</p>',
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK,
fn: function () {
Ext.getCmp('addUserFrm').reset();
Ext.getCmp('addUserWdw').close();
}
})
} else {
Ext.Msg.show({
title: 'Unexpected Error!',
msg: '<p>An unexpected error occurred when trying to update the user <strong>' + Ext.getCmp('addUserFirstName').getValue + ' ' + Ext.getCmp('adduUserLastName').getValue() + '</strong>. Please try updating the user again.</p><p>Should this problem persist, please contact technical support and provide the following information:</p><p>' + jData.status + '</p>',
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK,
fn: function () {
Ext.getCmp('addUserFrm').reset();
Ext.getCmp('addUserWdw').close();
}
})
}
}
})
}
}
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-ban',
handler: function () {
this.up('form').up('window').close();
}
}],
items: [{
xtype: 'textfield',
anchor: '100%',
name: 'editUserFirstName',
id: 'editUserFirstName',
fieldLabel: 'First Name',
allowBlank: false,
minLength: 2,
madLength: 65,
selectOnAutoFocus: true,
listeners: {
afterrender: function () {
this.focus(true);
}
}
}, {
xtype: 'textfield',
anchor: '100%',
name: 'editUserLastName',
id: 'editUserLastName',
fieldLabel: 'Last Name',
allowBlank: false,
minLength: 2,
maxLength: 65
}, {
xtype: 'textfield',
anchor: '100%',
name: 'editUserEmail',
id: 'editUserEmail',
fieldLabel: 'Email',
allowBlank: false,
maxLength: 255,
selectOnFocus: true,
vtype: 'email'
}, {
xtype: 'textfield',
anchor: '100%',
name: 'editUserPhone',
id: 'editUserPhone',
fieldLabel: 'Phone',
maskRe: /[0-9]/,
regexText: 'Numbers Only',
allowBlank: true,
vtype: 'phone',
maxLength: 14,
listeners: {
change: function () {
if (this.getValue().length == 3) {
this.setValue('(' + this.getValue() + ') ');
}
if (this.getValue().length == 9) {
this.setValue(this.getValue() + '-');
}
}
}
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Reset Password',
itemId: 'editUserResetGrp',
defaults: {
flex: 1
},
layout: 'hbox',
width: 200,
items: [{
xtype: 'radiofield',
boxLabel: 'Yes',
name: 'editUserReset',
inputValue: 1,
id: 'editUserReset1'
}, {
xtype: 'radiofield',
boxLabel: 'No',
name: 'editUserReset',
inputValue: 0,
id: 'editUserReset2'
}]
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Lock Account',
defaults: {
flex: 1
},
layout: 'hbox',
width: 200,
items: [{
xtype: 'radiofield',
boxLabel: 'Yes',
name: 'editUserLocked',
inputValue: 0,
id: 'editUserLocked1'
}, {
xtype: 'radiofield',
boxLabel: 'No',
name: 'editUserLocked',
inputValue: 1,
id: 'editUserLocked2'
}]
}]
}]
})
My controller code is
Ext.define('scim.view.users.UserController', {
extend: 'Ext.app.ViewController',
alias: 'controller.user',
addUser: function () {
var addUserWdw = Ext.create('scim.view.users.AddUserWdw', {
title: 'Add New User'
}).show();
},
editUser: function (grid, rowIndex, colIndex) {
var objRow = Ext.getStore('User').getAt(rowIndex);
var editUserWdw = Ext.create('scim.view.users.EditUserWdw', {
title: 'Edit User - ' + objRow.data.userFirstName + ' ' + objRow.data.userLastName
}).show();
Ext.getCmp('editUserFirstName').setValue(objRow.data.userFirstName);
Ext.getCmp('editUserLastName').setValue(objRow.data.userLastName);
Ext.getCmp('editUserEmail').setValue(true);
Ext.getCmp('editUserPhone').setValue('(' + objRow.data.userPhone.substr(0, 3) + ') ' + objRow.data.userPhone.substr(3, 3) + '-' + objRow.data.userPhone.substr(6, 4));
console.log(objRow.data.reset);
if (objRow.data.reset == 0) {
console.log(Ext.getCmp('editUserReset2'));
console.log(Ext.getCmp('editUserReset2').checked);
Ext.getCmp('editUserReset2').setChecked(true);
console.log(Ext.getCmp('editUserReset2').checked);
} else {
console.log(Ext.getCmp('editUserReset1'));
}
},
getUsers: function () {
Ext.getStore('Users').load();
}
})
When running
console.log(Ext.getCmp('editUserReset2').checked)
The results received are as expected "false".
console.log(Ext.getCmp('editUserReset2').setChecked(true) triggers then the error returned is Uncaught TypeError: Ext.getCmp(...).setChecked is not a function I've tried getting the fieldcontainer and then an array of radiofield's and using setChecked(index, true) with the same results.
I've checked the documentation and it is a method to this xtype. So I've become stumped in where this error is generating from. Any help would be greatly appreciated.
Thanks @EvanTrimboli for the following answer...
I was using the documentation on Sencha's website for the Modern Toolkit which uses the
Ext.getCmp(...).setChecked(true)
While my code is actually using the Classic Toolkit which uses the
Ext.getCmp(...).setValue(value)
As the means of setting a radio button checked state.