I have a panel which will render dynamic check boxes. after an event listener the checkboxes need to be updated dynamically based on the true/false values from the JSON returned from the server. The application is developed in Extjs 4.2 version. I have checked that the after rendering the checkboxes they are getting loaded with the data but immediately being cleared.
To dynamically generate check boxes….
Ext.Ajax.request({
url: 'http://soup.nielsen.com/test/test5.php',
method: 'POST',
success: function(result, request) {
var json = result.responseText;
var temp = JSON.parse(json);
for(var i=0;i<Object.keys(temp[newValue]).length;i++){
menuArray.push({
xtype: 'checkboxfield',
boxLabel: (temp[newValue][i]).split("_").join(" "),
name: temp[newValue][i],
id:temp[newValue][i],
inputValue: 'true',
uncheckedValue: 'false',
formBind: false
});
}
checkboxGroup = new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',
fieldLabel: '',
id:'moduleCheckboxGroup',
columns: 1,
items: menuArray
});
permissionPanel.removeAll();
permissionPanel.add(checkboxGroup);
},failure: function(result, request) {
Ext.Msg.alert('Error', 'An Error occured...');
} });
To load the checkboxes with data…
if(grid.getSelectionModel().hasSelection()){
var userID = grid.getSelectionModel().getSelection()[0].data.ID;
var userName = grid.getSelectionModel().getSelection()[0].data.FULL_USER_NAME;
var userGroup = grid.getSelectionModel().getSelection()[0].data.USER_GROUP;
//Creating Dynamic Checkboxes to load User module permissions
var permissionPanel = Ext.getCmp('permissionsPanel');
permissionPanel.show();
var checkboxGroup;
var menuArray = [];
var names = [];
var fieldset;
// Loading a selected user data into user form
var form = Ext.getCmp('userForm').getForm();
Ext.Ajax.request({
url: 'http://soup.nielsen.com/test/Get_All_User_Info_byID2.php',
method: 'POST',
params: {num:userID},
success: function(result, request) {
var json = result.responseText;
var temp = JSON.parse(json);
//form.reset();
Ext.getCmp('allUsersListPanel').hide();
Ext.getCmp('userPanel').show();
Ext.getCmp('userGroup').setValue(temp.USERINFO.USER_GROUP);
form.setValues(temp.USERINFO);
perForm.setValues(temp.USERINFO);
},
failure: function(result, request) {
Ext.Msg.alert('Error', 'An Error occured...');
}
}); } else {Ext.Msg.alert('Message','Please select a user');}
Best Answer
1) you don't need to use inputValue: 'true', uncheckedValue:'false' configs : value or checked is enough
2) you don't need to use id,just use name actually never use id it is a bad practice. itemId is recommed if you need query with id like query
3) your json object property names should match with form field names
In other words temp.USERINFO object should have properties with name temp[newValue][i] (of course value )
Summary :