extjs在formpanel中使用checkbox的注意事项

1. 在formpanel的item项，将checkbox的属性定义为xtype: 'checkbox'，而不要定义为inputType: 'checkbox'。后者会造成change事件参数不正确及整个checkbox顽固性居中的问题。

2. 使用一组checkbox时，需要将其加入fieldcontainer中

{
            id: 'roleContainer',
            xtype: 'fieldcontainer',
            fieldLabel: 'Role:',
            defaultType: 'checkboxfield'
            items: [
                {
                    boxLabel  : 'Anchovies',
                    name      : 'topping',
                    inputValue: '1',
                    id        : 'checkbox1'
                }, {
                    boxLabel  : 'Artichoke Hearts',
                    name      : 'topping',
                    inputValue: '2',
                    checked   : true,
                    id        : 'checkbox2'
                }, {
                    boxLabel  : 'Bacon',
                    name      : 'topping',
                    inputValue: '3',
                    id        : 'checkbox3'
                }
            ]
        }

3. 搭配store的callback，动态添加checkbox的方法实例如下:

    function addRoleChecks(r) {
        var roleContainer=Ext.getCmp('roleContainer');
        for(var i=0; i<r.length; i++) {
            roleContainer.add({
                xtype: 'checkbox',
                boxLabel  : r[i].get('roleDescription'),
                name      : 'selectedRoleId',
                inputValue: r[i].get('roleId'),
                //id        : 'checkbox1'
                listeners: {
                    change: function(field) {
                        alert(field.checked);
                    }
                }
            });
        }
    }