`
linuxstuding
  • 浏览: 1230014 次
文章分类
社区版块
存档分类
最新评论

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');

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics