如何在 extjs 中使用 zIndex

Question

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 中没有。

Answer 1

我建议你使用ZIndexManager。

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