0

ウィンドウのヘッダーを非表示にする必要があるという要件があり、そのために使用しています

header:false

しかし、header:false を使用すると、ウィンドウをまったくドラッグできなくなります。

したがって、ウィンドウを本体でドラッグ可能にする方法はありますか? つまり、ヘッダーが false に設定されていて表示されない場合、何らかの方法でユーザーがウィンドウをドラッグすることもできます。

誰でもどんな提案でも。

助けてくれてありがとう。

PS: ExtJS バージョン 4.1

4

3 に答える 3

2

ドラッグの初期化方法を変更する独自のウィンドウ クラスを作成することもできます。ここでは、必要なことを正確に実行するウィンドウ クラスを定義しました。

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']);
        //}
    }
});
于 2012-08-28T19:19:01.513 に答える
0

Ext.Component の「ドラッグ可能」設定オプションを設定しようとしましたか? これにより、ウィンドウが直接ドラッグ可能に設定されます。また、'delegate' オプションを使用して、コンポーネントのどの部分がハンドルになるかを指定してみてください。ドキュメントの例を次に示します。

**ExtJs 4 以降で利用できるので、大丈夫です。

于 2012-09-17T07:02:00.780 に答える
0

これは本当に馬鹿げたバイパスです:

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」

これが多少役立つことを願っています。

于 2012-08-29T13:10:29.687 に答える