EXTJS 6.2.0中如何调整Ext.window.Window弹窗的缩放调整手柄宽度

可以通过两种方式自定义调整窗口缩放手柄的宽度：

• 方案1：全局CSS覆盖（所有窗口生效）
  ExtJS 6.2.0的缩放手柄默认使用.x-resizable-handle样式类，直接在你的自定义样式文件中添加以下规则即可，注意要保证自定义CSS加载顺序晚于ExtJS官方主题CSS：

/* 调整所有方向缩放手柄的尺寸 */
.x-resizable-handle {
    width: 15px !important; /* 水平方向手柄的宽度 */
    height: 15px !important; /* 垂直方向手柄的高度，建议和宽度统一 */
}
/* 仅调整右下角的缩放手柄 */
.x-resizable-handle-se {
    width: 15px !important;
    height: 15px !important;
}

• 方案2：单窗口配置（仅当前窗口生效）
  创建Ext.window.Window实例时，通过resizable配置项直接指定手柄宽度：

Ext.create('Ext.window.Window', {
    title: '测试窗口',
    width: 400,
    height: 300,
    resizable: {
        handles: 'all', // 可按需指定允许拖拽的方向，默认值为s e se
        handleWidth: 15 // 自定义手柄宽度，单位为px
    },
    renderTo: Ext.getBody()
});

如果调整后发现手柄的可拖拽热区和视觉位置不匹配，可对应调整.x-resizable-handle的top/right/bottom/left偏移属性，保证热区和视觉位置对齐即可。

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