我们有一个要求,我们需要隐藏窗口的标题,为此我们正在使用
header:false
但是如果我们使用 header:false,那么窗口就根本不能被拖动。
因此,无论如何,窗口可以通过主体拖动吗?也就是说,如果标题设置为 false 并且没有显示,那么用户也可以以某种方式拖动窗口。
任何建议任何人。
谢谢您的帮助。
PS:ExtJS 4.1 版
您可以创建自己的窗口类来更改拖动的初始化方式,在这里我定义了一个完全符合您要求的窗口类。
Ext.define("MyCustomWindowClass", {
extend: "Ext.window.Window",
initDraggable: function() {
var me = this,
ddConfig;
if (!me.header) {
me.updateHeader(true);
}
/*
* Check the header here again. If for whatever reason it wasn't created in
* updateHeader (we were configured with header: false) then we'll just ignore the rest since the
* header acts as the drag handle.
*/
//if (me.header) {
ddConfig = Ext.applyIf({
el: me.el//,-Reimius, I commented out the next line that delegates the dragger to the header of the window
//delegate: '#' + Ext.escapeId(me.header.id)
}, me.draggable);
// Add extra configs if Window is specified to be constrained
/*if (me.constrain || me.constrainHeader) {
ddConfig.constrain = me.constrain;
ddConfig.constrainDelegate = me.constrainHeader;
ddConfig.constrainTo = me.constrainTo || me.container;
}*/
/**
* @property {Ext.util.ComponentDragger} dd
* If this Window is configured {@link #cfg-draggable}, this property will contain an instance of
* {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker}) which handles dragging
* the Window's DOM Element, and constraining according to the {@link #constrain} and {@link #constrainHeader} .
*
* This has implementations of `onBeforeStart`, `onDrag` and `onEnd` which perform the dragging action. If
* extra logic is needed at these points, use {@link Ext.Function#createInterceptor createInterceptor} or
* {@link Ext.Function#createSequence createSequence} to augment the existing implementations.
*/
me.dd = new Ext.util.ComponentDragger(this, ddConfig);
me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
//}
}
});
您是否尝试过设置 Ext.Component 的“可拖动”配置选项?这将直接将您的 Window 设置为可拖动的,此外,请尝试使用“delegate”选项来指定组件的哪个部分将是句柄。这是文档中的一个示例。
**它从 ExtJs 4 开始可用,所以你很好。
这是一个非常愚蠢的旁路:
Ext.require([
'Ext.window.Window'
]);
Ext.onReady(function(){
Ext.create('Ext.Window', {
closable: false,
width: 400,
height: 200,
layout: 'fit'
}).show();
});
在CSS中:
.x-window-header-text {
height: 2px;
}
我知道它不完全符合您的要求,但标题为可拖动状态的文档是拖动处理程序: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window。窗口-cfg-可拖动
"True 允许窗口被标题栏拖动"
希望这会有所帮助。