如,有如下窗體
var formWin = new Ext.Window({
title: 'new window'
,width: 200
,height: 400
,html: 'This will be always on top'
});
現要使得這個窗體總是在其他窗體的前面,而且不影響其他窗體的使用(使用modal:true 選項可創建模態窗,但會凍結整個屏幕)。
國際慣例,先在 官方論壇 搜索一下,最快捷、準確的方法是 使用google來搜索 。果然google沒讓人失望,第一頁里就找到了 關鍵帖 。
他介紹的方法是修改Ext.WindowGroup 類(位于 widgets/WindowManager.js )的私有方法sortWindows(),改為:
var sortWindows = function(d1, d2){
return (!d1.alwaysOnTop && (d2.alwaysOnTop || !d1._lastAccess || d1._lastAccess < d2._lastAccess)) ? -1 : 1;
};
這樣就運行在初始化window時可以使用一個新的選項:alwaysOnTop ,如:
var formWin = new Ext.Window({
title: 'new window'
,width: 200
,height: 400
,html: 'This will be always on top'
,alwaysOnTop: true
});
修改做的修改很少,但要hack源碼肯定是最差的備選的方案。
而sortWindows 是個私有方法,js是無法從類外覆蓋私有方法的,具體可參考
Tutorial:Application Layout for Beginners
因此嘗試劍走偏鋒,看看有沒其他方案。查看 Ext.Window的API ,在 事件 中的部分發現有兩個事件是相關的:
activate : ( Ext.Window this )
Fires after the window has been visually activated via setActive.
deactivate : ( Ext.Window this )
Fires after the window has been visually deactivated via setActive.
一般來說,要使窗體總在最前方,應該是先觸發了deactivate事件,因此在這時再主動設置為active,則可使窗體總保持激活狀態也即是最前方了。
嘗試如下:
formWin.on('deactivate', function(){
this.setActive(true);
})
發現無效。閱讀setActive的源碼后知道原來setActive 只是用來設置是否顯示窗體陰影是否顯示。
Ext.Window 還有一個公共方法可以利用:
toFront() : Ext.Window
Brings this window to the front of any other visible windows
嘗試用來代替setActive:
formWin.on('deactivate', function(){
this.toFront();
})
發現也無效,查看源碼發現Ext.Window.toFront() 實際是調用 Ext.WindowGroup.bringToFront(win),而在 Ext.WindowGroup.bringToFront(win) 里會判斷 win 是否是當前窗口,如果是就不做任何操作,而在deactivate 里,當前窗口正是formWin,所以不會對他做任何操作。
在仔細跟讀源碼,原來決定窗體哪個在前面,是使用Ext.Window.setZIndex() 在設置窗體z軸(垂直于電腦屏幕的軸)的 zIndex 值,越高的則越前。
知道底層實現原理就好辦了,只要給formWin設置一個較大的zIndex值則可,嘗試如:
formWin.on('deactivate', function(){
this.setZIndex(9999);
})
點擊其他窗體,formWin總是顯示在最前方了。
但窗體的數量是不確定的,而Ext用來調整各個窗體的前后順序是動態的,具體實現源碼為:
// private
var orderWindows = function(){
var a = accessList, len = a.length;
if(len > 0){
a.sort(sortWindows);
var seed = a[0].manager.zseed;
for(var i = 0; i < len; i++){
var win = a[i];
if(win && !win.hidden){
win.setZIndex(seed + (i*10));
}
}
}
activateLast();
};
因此,也要根據當前窗體的數量來動態調整zIndex的值,代碼改為:
formWin.on('deactivate', function(){
var i=1;
this.manager.each(function(){i++});
this.setZIndex(this.manager.zseed + (i*10));
})
至此,可以說是已經完整實現了需求。
但有時窗體是直接new出來,沒有賦值給臨時變量,需要能在構造函數中設置。幸好Ext的接口豐富,有提供一個plugin的選項來提供擴展(如何寫一個Ext的plugin: Plugins: Writing a Plugin ),最終實現代碼為:
var formWin = new Ext.Window({
title: 'new window'
,width: 200
,height: 400
,html: 'This will be alwasy on top'
,plugins: new function(){
this.init = function(win){
win.on('deactivate', function(){
var i=1;
this.manager.each(function(){i++});
this.setZIndex(this.manager.zseed + (i*10));
})
}
}
});
如果要實現重用,最好把plugin實現代碼抽取為一個獨立的plugin,如:
Ext.ux.WindowAlwaysOnTop = function(){
this.init = function(win){
win.on('deactivate', function(){
var i=1;
this.manager.each(function(){i++});
this.setZIndex(this.manager.zseed + (i*10));
})
}
}
以后使用則很方便了:
var formWin = new Ext.Window({
title: 'new window'
,width: 200
,height: 400
,html: 'This will be always on top'
,plugin: new Ext.ux.WindowAlwaysOnTop
});
效果如圖
var formWin = new Ext.Window({
title: 'new window'
,width: 200
,height: 400
,html: 'This will be always on top'
});
現要使得這個窗體總是在其他窗體的前面,而且不影響其他窗體的使用(使用modal:true 選項可創建模態窗,但會凍結整個屏幕)。
國際慣例,先在 官方論壇 搜索一下,最快捷、準確的方法是 使用google來搜索 。果然google沒讓人失望,第一頁里就找到了 關鍵帖 。
他介紹的方法是修改Ext.WindowGroup 類(位于 widgets/WindowManager.js )的私有方法sortWindows(),改為:
var sortWindows = function(d1, d2){
return (!d1.alwaysOnTop && (d2.alwaysOnTop || !d1._lastAccess || d1._lastAccess < d2._lastAccess)) ? -1 : 1;
};
這樣就運行在初始化window時可以使用一個新的選項:alwaysOnTop ,如:
var formWin = new Ext.Window({
title: 'new window'
,width: 200
,height: 400
,html: 'This will be always on top'
,alwaysOnTop: true
});
修改做的修改很少,但要hack源碼肯定是最差的備選的方案。
而sortWindows 是個私有方法,js是無法從類外覆蓋私有方法的,具體可參考
Tutorial:Application Layout for Beginners
因此嘗試劍走偏鋒,看看有沒其他方案。查看 Ext.Window的API ,在 事件 中的部分發現有兩個事件是相關的:
activate : ( Ext.Window this )
Fires after the window has been visually activated via setActive.
deactivate : ( Ext.Window this )
Fires after the window has been visually deactivated via setActive.
一般來說,要使窗體總在最前方,應該是先觸發了deactivate事件,因此在這時再主動設置為active,則可使窗體總保持激活狀態也即是最前方了。
嘗試如下:
formWin.on('deactivate', function(){
this.setActive(true);
})
發現無效。閱讀setActive的源碼后知道原來setActive 只是用來設置是否顯示窗體陰影是否顯示。
Ext.Window 還有一個公共方法可以利用:
toFront() : Ext.Window
Brings this window to the front of any other visible windows
嘗試用來代替setActive:
formWin.on('deactivate', function(){
this.toFront();
})
發現也無效,查看源碼發現Ext.Window.toFront() 實際是調用 Ext.WindowGroup.bringToFront(win),而在 Ext.WindowGroup.bringToFront(win) 里會判斷 win 是否是當前窗口,如果是就不做任何操作,而在deactivate 里,當前窗口正是formWin,所以不會對他做任何操作。
在仔細跟讀源碼,原來決定窗體哪個在前面,是使用Ext.Window.setZIndex() 在設置窗體z軸(垂直于電腦屏幕的軸)的 zIndex 值,越高的則越前。
知道底層實現原理就好辦了,只要給formWin設置一個較大的zIndex值則可,嘗試如:
formWin.on('deactivate', function(){
this.setZIndex(9999);
})
點擊其他窗體,formWin總是顯示在最前方了。
但窗體的數量是不確定的,而Ext用來調整各個窗體的前后順序是動態的,具體實現源碼為:
// private
var orderWindows = function(){
var a = accessList, len = a.length;
if(len > 0){
a.sort(sortWindows);
var seed = a[0].manager.zseed;
for(var i = 0; i < len; i++){
var win = a[i];
if(win && !win.hidden){
win.setZIndex(seed + (i*10));
}
}
}
activateLast();
};
因此,也要根據當前窗體的數量來動態調整zIndex的值,代碼改為:
formWin.on('deactivate', function(){
var i=1;
this.manager.each(function(){i++});
this.setZIndex(this.manager.zseed + (i*10));
})
至此,可以說是已經完整實現了需求。
但有時窗體是直接new出來,沒有賦值給臨時變量,需要能在構造函數中設置。幸好Ext的接口豐富,有提供一個plugin的選項來提供擴展(如何寫一個Ext的plugin: Plugins: Writing a Plugin ),最終實現代碼為:
var formWin = new Ext.Window({
title: 'new window'
,width: 200
,height: 400
,html: 'This will be alwasy on top'
,plugins: new function(){
this.init = function(win){
win.on('deactivate', function(){
var i=1;
this.manager.each(function(){i++});
this.setZIndex(this.manager.zseed + (i*10));
})
}
}
});
如果要實現重用,最好把plugin實現代碼抽取為一個獨立的plugin,如:
Ext.ux.WindowAlwaysOnTop = function(){
this.init = function(win){
win.on('deactivate', function(){
var i=1;
this.manager.each(function(){i++});
this.setZIndex(this.manager.zseed + (i*10));
})
}
}
以后使用則很方便了:
var formWin = new Ext.Window({
title: 'new window'
,width: 200
,height: 400
,html: 'This will be always on top'
,plugin: new Ext.ux.WindowAlwaysOnTop
});
效果如圖
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
