移除ExtJS窗口拖至屏幕左边缘时出现的透明阴影

首先要明确：ExtJS窗口的阴影不是通过CSS的box-shadow属性实现的，而是框架单独生成了一个DOM元素来模拟阴影效果，所以直接设置box-shadow为none是无效的。针对你遇到的情况，给你几个可行的解决办法：

• 直接禁用窗口阴影
  在Window配置里添加shadow: false，这是最直接的方案：

  var win = new Ext.Window({
      width: screen.width/2,
      height: screen.height/2,
      modal: true,
      shadow: false // 完全禁用窗口阴影
  });
  

• 仅禁用特定窗口的阴影（不影响全局）
  要是不想让所有窗口都失去阴影，给目标窗口加个自定义类，再用CSS针对性覆盖：
  第一步，给窗口配置自定义类：

  var win = new Ext.Window({
      width: screen.width/2,
      height: screen.height/2,
      modal: true,
      cls: 'no-shadow-custom-win'
  });
  

  第二步，编写CSS规则：

  .no-shadow-custom-win .x-window-shadow {
      display: none !important;
  }
  

• 排查拖动时的幽灵元素
  如果你遇到的是拖动过程中临时出现的阴影，可能是拖动时的ghost元素导致的，禁用它试试：

  var win = new Ext.Window({
      width: screen.width/2,
      height: screen.height/2,
      modal: true,
      draggable: {
          ghost: false
      }
  });
  

可以先尝试第一种方法，大概率能直接解决问题。如果还有异常，打开浏览器控制台查看阴影元素的类名，再针对性写CSS覆盖即可。

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