weixin_42364762
2010-05-05 20:08
浏览 503

extjs 多层弹出窗口管理

我在window中,使用了一个combobox,该combobox是用tpl在下拉框中嵌入了一个列表的模式生成的。
列表上的工具条上放置了一个新增按钮,弹出一个新增窗口。
我通过ff分析,设定了该弹出窗口的z-index:
Ext.get(mainpanel.addFormWindow.id).setStyle("z-index",Ext.get(mainpanel.addFormWindow.id).setStyle("z-index",Ext.get(mainpanel.grid.id).up('div.x-combo-list',4).getStyle('z-index')));
使该窗口能浮动在下拉列表上。此时,如果点击主窗口,则悲剧了,新增窗口被下拉列表覆盖了。
请大虾们指教。

同时:请问,如果我有多个弹出窗口,比如 winA, winB, winC ,如何永远让 这3个窗口,按照我希望的层次显示。
比如: winC 在最上面 , winB.在中间, wincC在最下层。
如果只有2个窗口可以通过监听
listeners:{
activate:function(){
Ext.WindowMgr.sendToBack(winB);
}
} ,来搞定,但是多个该怎么办?

问题图片,以及源码,都在附件中了。可以直接qq联系我: 120803075

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • chem_zqm 2010-05-06 02:53
    已采纳

    解决多层窗口固定层次的问题非常简单,你只需要将每个window的setZIndex设置成空函数就行了,例如:
    [code="js"]
    new Ext.Window({
    setZIndex:Ext.emptyFn,
    ...
    [/code]
    我看你的代码发现问题太多了,你的window没有重用,销毁时没有进行注册,还有那个逻辑实在太复杂了点,我写了一个你参考下吧
    [code="js"]
    /**

    Ext.ux.TbarCombo = Ext.extend(Ext.form.ComboBox, {

    initList: function(){
        this.title = '<div id="addbutton" style="height:20px"></div>';
        Ext.ux.TbarCombo.superclass.initList.call(this);
        this.addBtn = new Ext.Button({
            renderTo: 'addbutton',
            text: '新增',
            handler: this.showWin,
            scope: this
        })
    },
    showWin: function(){
        if (!this.win) {
            this.win = new Ext.Window({
                animateTarget: this.addBtn.el,
                closeAction: 'hide',
                title: '添加',
                width: 200,
                layout: 'form',
                labelWidth: 60,
                bodyStyle: {
                    padding: '10px'
                },
                items: {
                    ref: 'input',
                    anchor: '90%',
                    emptyText: '请输入',
                    xtype: 'textfield',
                    fieldLabel: '新增属性'
                },
                buttons: [{
                    text: '保存',
                    handler: this.doSave,
                    scope: this
                }],
                setZIndex: Ext.emptyFn,
                buttonAlign: 'center'
            });
        }
        else {
            this.win.input.reset();
        }
        this.win.show();
    },
    doSave: function(){
        var val = this.win.input.getValue();
        this.getStore().loadData([val], true);
        Ext.MessageBox.show({
            msg: "保存",
            icon: Ext.MessageBox.INFO,
            buttons: Ext.MessageBox.OK
        });
        this.win.hide();
    },
    getParentZIndex: function(){//这里让它大一些 list就不会因为window的zindex变化而隐藏了
        return Ext.ux.TbarCombo.superclass.getParentZIndex.call(this) + 10;
    },
    postBlur: Ext.emptyFn,
    collapseIf: Ext.emptyFn,
    onDestroy: function(){
        Ext.destroy(this.win);
        Ext.ux.TbarCombo.superclass.onDestroy.call(this);
    }
    

    });

    Ext.reg('tbarcombo', Ext.ux.TbarCombo);

    Ext.onReady(function(){
    Ext.QuickTips.init();
    var win = new Ext.Window({
    title: '测试',
    height: 300,
    draggable: false,
    width: 300,
    items: {
    xtype: 'tbarcombo',
    setZIndex: Ext.emptyFn,
    emptyText: '请选择',
    store: ['属性1', '属性2', '属性3', '属性4'],
    allowBlank: false,
    forceSelection: true,
    triggerAction: 'all'
    }
    });

    new Ext.Viewport({
        listeners: {
            afterrender: function(){
                win.show();
            }
        }
    });
    

    });
    [/code]
    找个页面放进去跑一下你就明白了

    已采纳该答案
    打赏 评论
  • 王启军 2010-05-05 22:22

    设定全局变量,按照点击顺序的不同。使每个div的z-index有先后顺序

    打赏 评论
  • suziwen 2010-05-06 00:06

    这个设置成模态窗口更好吧,,
    就是点出弹出窗口时,后面的内容被一个层给遮住,只有用户在这个弹出窗口关闭时,遮罩层才会消失。。。

    打赏 评论
  • chem_zqm 2010-05-06 02:55

    [code="js"]return Ext.ux.TbarCombo.superclass.getParentZIndex.call(this) + 10;[/code]
    改成
    [code="js"]return Ext.ux.TbarCombo.superclass.getParentZIndex.call(this) + 1000;[/code]

    打赏 评论
  • chem_zqm 2010-05-06 21:59

    3.1.1版本没有任何问题3.1.0版本确实有问题 :(

    打赏 评论

相关推荐 更多相似问题