Question

我正在尝试没有成功掩盖刚刚使用Ext.ux.Spotlight创建的窗口。这是我的代码：

var win = Ext.create('widget.window', {
    height: 400,
    width: 600,
    id: 'win',
    x: 340,
    y: 120,
    title: 'TEST MASKING',
        items:[
           {
              xtype: 'textfield',
              width: 475,
              fieldLabel: 'Test',
              y: 60
           } 
    ]
}.show();

var spot = Ext.create('Ext.ux.Spotlight', {
               easing: 'easeOut',
               duration: 300
});

spot.show('win');

窗口显示正确，但窗口后面没有任何反应（我遵循此example）。

Answer 1

你可能需要聚光灯css：

    .x-spotlight {
        background-color: #ccc;

        z-index: 8999;
        position: absolute;
        top: 0;
        left: 0;
        -moz-opacity: 0.5;
        opacity: .50;
        filter: alpha(opacity=50);
        width: 0;
        height: 0;
        zoom: 1;
    }

Answer 2

您可以设置窗口的模态以达到相同的效果。 “莫代尔：真”

Ext.define('HEB.view.states.WindowForm', {
    extend: 'Ext.window.Window',
    alias: 'widget.stateswindowform',

    title: 'Add New State',
    layout: 'fit',
    autoshow: false,
    modal: true
});

使用Ext.ux.Spotlight在窗口后面屏蔽

2 个答案: