Extjs floating Panel 挡住 提示框或确认框的解决方法

在弹窗代码的后面紧跟一句:
Ext.MessageBox.getDialog().getEl().setStyle('z-index', '80000');
即可。
如:
Ext.Msg.alert('提示', '根节点不能删除!');
Ext.MessageBox.getDialog().getEl().setStyle('z-index', '80000');


Ext.MessageBox.confirm("删除确认", '删除前将保存部门树组织结构,是否要保存部门树并删除"' + node.text + '" 及其下子部门?', function(button, text) {
if (button == "yes") {

}
});
Ext.MessageBox.getDialog().getEl().setStyle('z-index', '80000');


上面的方案很繁琐,每一个弹出对象都要设置一次 z-index ,
另一种解决方案是把panel的 floating 属性去掉,保留draggable,panel建好后设置position样式, 这样就不会出现漂浮面板遮挡弹出窗的问题。如:
var p = new Ext.Panel({
title: '菜单管理',
x: 5,
y: 5,
renderTo: Ext.getBody(),
//floating: true,
frame: true,
width: 400,
height: 500,
//autoHeight: true,
buttonAlign: 'center',
layout: 'fit',
draggable: {
insertProxy: false,
onDrag: function(e) {
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = 5; //pel.getTop(true); //仅移动X轴
var s = this.panel.getEl().shadow; //移动阴影
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag: function(e) {
this.panel.setPosition(this.x, this.y);
}
},
buttons: [{
text: '保存',
handler: function() {
var data = new MenuInfo();
createMenuInfo(menutree.root, data);
Ext.Ajax.request({
url: 'MenuAction.ashx',
method: 'post',
params: {
action: 'save',
data: data.data
},
success: function(response, opts) {
if (response.responseText == '1') {
Ext.Msg.alert('提示', "保存成功!");
menutree.root.reload();
menutree.expandAll();
} else {
Ext.Msg.alert('提示', "保存失败!");
}
},
failure: function() { Ext.Msg.alert('提示', "保存失败!"); }
});
}
}, {
text: '刷新',
handler: function() {
menutree.root.reload();
menutree.expandAll();
}
}],
html: "<div id='div_menuTree'></div>"
});
//设置为绝对位置,使面板能漂移
p.getEl().setStyle('position', 'absolute');

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值