javascript 如何创建仅屏蔽 ExtJs 4 中特定组件的模式窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6428797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a modal window which only masks a particular component in ExtJs 4?
提问by shane87
I would like to create a modal window which will only mask the center region of my application.
How can I achieve this?
我想创建一个模式窗口，它只会掩盖我的应用程序的中心区域。
我怎样才能做到这一点？
In ExtJs 3 I was able to use the windows renderToproperty and render the window to the center region. So that when the window was shown only the center region was masked.
在 ExtJs 3 中，我能够使用 windowsrenderTo属性并将窗口渲染到中心区域。这样当窗口显示时，只有中心区域被屏蔽。
However if I use the renderToproperty in ExtJs 4 the whole document.body is masked. And in IE the whole the window is also masked.
但是，如果我renderTo在 ExtJs 4 中使用该属性，则整个 document.body 都会被屏蔽。而在 IE 中，整个窗口也被屏蔽了。
Below is the border layout example from the Ext Examples. with a modal window in the center region. ( the whole body gets masked when shown)
下面是 Ext 示例中的边框布局示例。在中心区域有一个模态窗口。（显示时整个身体都被遮住了）
Ext.onReady(function() {
var cw;
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: true,
title: 'North',
split: true,
height: 100,
html: 'north'
},{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '30%',
html: 'west<br>I am floatable'
},{
region: 'center',
layout: 'border',
border: false,
items: [{
region: 'center',
html: 'center center',
title: 'Center',
items: [cw = Ext.create('Ext.Window', {
xtype: 'window',
closable: false,
minimizable: true,
title: 'Constrained Window',
height: 200,
modal: true, //MODAL WINDOW, MASKS THE WHOLE DOCUMENT BODY?
width: 400,
constrain: true,
html: 'I am in a Container',
itemId: 'center-window',
minimize: function() {
this.floatParent.down('button#toggleCw').toggle();
}
})],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: ['Text followed by a spacer',
' ', {
itemId: 'toggleCw',
text: 'Constrained Window',
enableToggle: true,
toggleHandler: function() {
cw.setVisible(!cw.isVisible());
}
}]
}]
},{
region: 'south',
height: 100,
split: true,
collapsible: true,
title: 'Splitter above me',
html: 'center south'
}]
},{
region: 'east',
collapsible: true,
floatable: true,
split: true,
width: 200,
title: 'East',
layout: {
type: 'vbox',
padding: 5,
align: 'stretch'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Text field'
}, {
xtype: 'component',
html: 'I am floatable'
}]
},{
region: 'south',
collapsible: true,
split: true,
height: 200,
title: 'South',
layout: {
type: 'border',
padding: 5
},
items: [{
title: 'South Central',
region: 'center',
html: 'South Central'
}, {
title: 'South Eastern',
region: 'east',
flex: 1,
html: 'South Eastern',
split: true,
collapsible: true
}, {
title: 'South Western',
region: 'west',
flex: 1,
html: 'South Western<br>I collapse to nothing',
split: true,
collapsible: true,
collapseMode: 'mini'
}]
}]
});
});
回答by JamesHalsall
Two ways...
两种方式...
Via the component's ID:
通过组件的 ID：
Ext.getCmp('componentId').getEl().mask()
Ext.getCmp('componentId').getEl().mask()
Or via the element's ID:
或者通过元素的 ID：
Ext.get('elementId').mask()
Ext.get('elementId').mask()
I'm guessing that the first one is what you'll need. You can just bind it to an event listener on the window...
我猜第一个是你需要的。您可以将其绑定到窗口上的事件侦听器...
listeners: {
'show': function() {
Ext.getCmp('componentId').getEl().mask();
},
'hide': function() {
Ext.getCmp('componentId').getEl().unmask();
}
}
EDIT:
编辑：
As described in the ExtJS 4.0.2 API docs... modal masks everything behind the Window, not just it's parent...
如 ExtJS 4.0.2 API 文档中所述...模态掩盖了窗口后面的所有内容，而不仅仅是它的父...
True to make the window modal and mask everything behind it when displayed, false to display it without restricting access to other UI elements (defaults to false).
True 使窗口模式化并在显示时屏蔽其后面的所有内容，false 显示它而不限制对其他 UI 元素的访问（默认为 false）。
回答by Artsiom Tymchanka
You can add modal window not to the whole viewport, but to the 'center' region only. In this case only this region will be masked. There are some code:
您可以不将模态窗口添加到整个视口，而只能添加到“中心”区域。在这种情况下，只会屏蔽该区域。有一些代码：
var window = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
modal: true
});
this.getViewport().child('[region=center]').add(window);
window.show();
回答by IlPADlI
use renderToctor param
使用renderTo构造函数参数
expample:
例子：
dialog = new Ext.ux.AnimateWindow({
renderTo: App.FeedPanel.el.dom.firstElementChild.firstElementChild,
modal: true,
title: "Add Feed Source",
closable: true,
resizable: false,
width: 350,
items: [form]
});
