我在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
解决多层窗口固定层次的问题非常简单,你只需要将每个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]
找个页面放进去跑一下你就明白了
设定全局变量,按照点击顺序的不同。使每个div的z-index有先后顺序
这个设置成模态窗口更好吧,,
就是点出弹出窗口时,后面的内容被一个层给遮住,只有用户在这个弹出窗口关闭时,遮罩层才会消失。。。
[code="js"]return Ext.ux.TbarCombo.superclass.getParentZIndex.call(this) + 10;[/code]
改成
[code="js"]return Ext.ux.TbarCombo.superclass.getParentZIndex.call(this) + 1000;[/code]
3.1.1版本没有任何问题3.1.0版本确实有问题 :(