How to dynamically change checkbox value in extjs app?

Question

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');}

Without code, we are unable to help you. Please provide us your implementation code. — Hariharan
You need to improve your question by adding some example code otherwise it can only be answered by guessing — sra

acteon acteon · Accepted Answer · 2016-06-06T09:52:37

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

 menuArray.push({
            xtype: 'checkboxfield',
            boxLabel: (temp[newValue][i]).split("_").join(" "),
            name: temp[newValue][i],
            value : false, // or checked : false
            formBind: false
        });

3) your json object property names should match with form field names

        form.setValues(temp.USERINFO);
        perForm.setValues(temp.USERINFO)

In other words temp.USERINFO object should have properties with name temp[newValue][i] (of course value )

Summary :

delete id and uncheckValue configs from checkboxes
make sure your json object properties has the same name with checkbox fields

How to dynamically change checkbox value in extjs app?

2 Answers