如何在extjs中使用z Index

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”的子组件也变得不透明。我尝试过这种风格：{position：'absolute'，'z-index'：1}，相同的代码是html，但不是在extjs中。

Answer 1

我建议你使用ZIndexManager。

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