如何修改ExtJS Triton中Window组件的Body内边距？

你用全局override没生效，大概率是组件初始化时的配置优先级问题，或是没精准命中控制内边距的核心属性。试试下面几种方法：

• 实例化时直接指定配置（推荐）
  全局覆盖容易影响其他Window组件，不如在创建目标Window时单独设置，精准控制：

  Ext.create('Ext.window.Window', {
      title: '自定义窗口',
      padding: 0,
      bodyPadding: 0,
      bodyStyle: 'padding: 0 !important;', // 强制覆盖框架默认样式
      items: [{
          xtype: 'tabpanel',
          bodyPadding: 0 // 如果TabPanel自身也带内边距，同步设置
      }]
  });
  

• 全局覆盖的正确写法
  如果一定要全局修改所有Window，要在initComponent方法里强制重置属性，确保覆盖组件的默认配置：

  Ext.window.Window.override({
      initComponent: function() {
          this.padding = 0;
          this.bodyPadding = 0;
          this.bodyStyle = Ext.apply(this.bodyStyle || {}, {
              padding: '0px'
          });
          this.callParent(arguments); // 调用父类初始化逻辑
      }
  });
  

• CSS强制覆盖兜底
  要是上面的方法都没效果，直接写CSS类强制覆盖框架默认样式：

  .no-padding-window .x-window-body {
      padding: 0 !important;
  }
  

  然后给目标Window绑定这个类：

  Ext.create('Ext.window.Window', {
      cls: 'no-padding-window',
      items: [{xtype: 'tabpanel'}]
  });
  

你之前的代码没生效，是因为style属性控制的是Window外层容器的样式，而默认的5px内边距实际来自x-window-body这个内部元素的padding，得用bodyPadding或bodyStyle来控制body区域的样式才行。

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