如何在 extjs 中使用 zIndex

Posted 2023-02-26

【中文标题】如何在 extjs 中使用 zIndex

【英文标题】：How to use zIndex in extjs

【发布时间】：2012-10-17 13:47:43

【问题描述】：

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”的子组件也得到了 opcaity。我已经尝试过样式： position:'absolute', 'z-index': 1，相同的代码在 html 中工作，但在 extjs 中没有。

【问题讨论】：

How sets z-index to Ext.Panel (ExtJS)?的可能重复

【参考方案1】：

我建议你使用ZIndexManager。

首先，注册你所有的容器，然后使用bringToFront方法显示你想要的容器。