如何在extjs中使用zIndex?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (417)
Ext.onReady(function(){ 
    Ext.create('Ext.panel.Panel',{
    title:'MAin Panel',
    renderTo:Ext.getBody(),
    height:600,
    width:600,
     bodyStyle: {
            background: 'yellow',
            position:'absolute ',
            'z-index': -1
        },
        items:[
               {
                 xtype:  Ext.create('Ext.window.Window',{
                        height : 500,
                        width : 500,
                        id:'abc',
                        items : [
                                    {
                                        xtype : 'button',
                                        text : 'Open',
                                        handler : function(){
                                            /* w2.showAt(450,300);
                                            w1.disable(); */
                                        }
                                    },
                                    {
                                        xtype:'panel',
                                        title:'Inner Panel',
                                        height:200,
                                        width:200,
                                        style:{
                                             position:'absolute ',
                                            'z-index': 2
                                        }
                                    }
                                 ],
                         bodyStyle:{
                              background: '#000000',
                              opacity: 0.7,

                         },
                 style:{
                     position:'absolute',
                     'z-index': 1

                 }
                    })

               }


               ]



});
Ext.getCmp('abc').show();
w1.setTitle('Window 1');
w1.show();
});

我有上面的代码,我希望“内部面板”应该通过窗口“abc”,并且不透明度属性不应该应用于“内部面板”。

窗口“abc”的子组件也变得不透明。我尝试过这种风格:{position:'absolute','z-index':1},相同的代码是html,但不是在extjs中。

提问于
用户回答回答于

我建议你用ZIndexManager

首先,注册所有容器,然后使用bringToFront方法来显示所需的容器。

扫码关注云+社区

领取腾讯云代金券