如何在extjs应用程序中动态更改复选框值?

时间:2013-06-21 09:47:49

标签: extjs extjs4 extjs4.2

我有一个面板,它将呈现动态复选框。在事件监听器之后,需要根据服务器返回的JSON中的true / false值动态更新复选框。该应用程序是在Extjs 4.2版本中开发的。我已经检查过,在呈现复选框后,他们正在加载数据但是立即被清除。

动态生成复选框....

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

要加载带有数据的复选框......

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

2 个答案:

答案 0 :(得分:1)

1)你不需要使用inputValue:'true',uncheckedValue:'false'配置:值或检查就够了

2)你不需要使用id,只是使用name实际上从不使用id这是一个不好的做法。如果您需要查询ID为查询

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

3)您的json对象属性名称应与表单字段名称匹配

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

换句话说,temp.USERINFO对象应该具有名称为temp [newValue] [i](当然值)的属性

摘要:

  • 从复选框中删除ID和uncheckValue配置
  • 确保您的json对象属性与复选框字段
  • 具有相同的名称

答案 1 :(得分:-1)

在表单中设置“名称”; 如果不是,你应该setValue()