ExtJS中如何重写/创建扩展组件的属性？

一、扩展组件时新增自定义属性（推荐使用config配置） #

ExtJS的组件体系设计了config配置项来标准化可配置属性，框架会自动为其生成对应的get[Property]和set[Property]方法，同时支持属性变更时的update[Property]钩子，比手动写独立函数更符合框架规范：

Ext.define('MyCustomCheckbox', {
    extend: 'Ext.Component',
    config: {
        checked: false // 设置属性默认值
    },

    // 自定义getter逻辑，替代你原来的写法
    getChecked: function() {
        // 这里可以加入你的自定义逻辑，比如获取DOM元素的选中状态
        return this.CKB_Modifier?.checked ?? this.getConfig('checked');
    },

    // 自定义setter，同步更新DOM和组件状态
    setChecked: function(value) {
        if(this.CKB_Modifier) {
            this.CKB_Modifier.checked = value;
        }
        // 调用父类方法维护config内部状态
        this.callParent([value]);
    },

    // 可选：当checked属性变化时触发的钩子
    updateChecked: function(newValue, oldValue) {
        // 这里可以处理属性变更后的UI同步或业务逻辑
        console.log('checked状态从', oldValue, '变为', newValue);
    }
});

二、重写已有组件的属性逻辑 #

如果需要修改ExtJS内置组件的属性行为，可以使用override来重写对应的getter/setter：

Ext.define('CheckboxOverride', {
    override: 'Ext.form.field.Checkbox',

    // 重写getChecked方法，替换原有逻辑
    getChecked: function() {
        return this.CKB_Modifier?.checked ?? this.callParent();
    }
});

关于你原有写法的说明 #

你直接将checked定义为独立函数的方式，不符合ExtJS组件的属性规范——框架默认会将checked视为一个布尔类型属性而非方法，其他依赖该属性的组件逻辑（比如表单验证、状态同步）可能会因为类型不匹配而出错。建议改用上述的getter/setter或config配置方式，既能兼容框架逻辑，又能实现自定义需求。

内容的提问来源于stack exchange，提问作者Charles Candy