panel mit drag und drop funktioniert nicht in extjs 4.1

Dieser code arbeitet in Extjs 4.0.2 ein
aber wenn umgewandelt 4.1 es funktioniert nicht mehr und gibt eine Fehlermeldung

Uncaught TypeError: Cannot call method 'query' of undefined

Ext.onReady(function() {

    var panel = new Ext.Panel({
        renderTo: divtag,
        draggable: {
            insertProxy: false,
            onDrag: function(e) {
                var el = this.proxy.getEl();
                this.x = el.getLeft(true);
                this.y = el.getTop(true);
            },
            endDrag: function(e) {
                this.panel.setPosition(this.x, this.y);
            }
        },
        title: 'Panel',
        width: 200,
        height: 100,
        x: 20,
        y: 20
    });
});

Ich habe versucht, folgenden code, der funktioniert gut mit Komponente, aber nicht mit Panel 🙁 und wirft den Fehler : "Uncaught TypeError: Object [object object] has no method 'ensureAttachedToBody' Ext.onReady(function() { new Ext.Component({ constrain: true, title:'Test', floating: true, style: { backgroundColor: '#fff', border: '1px solid black' }, html: '<h1 style="cursor:move">The title</h1><p>The content</p>', draggable: { delegate:this.body } }).show(); });

InformationsquelleAutor jayesh | 2011-12-19

Anscheinend gibt es einen bug in dieser version von Ext. Es wird nicht funktionieren, selbst wenn Sie versuchen, Standard-D ' N ' WÜRDE für panel wie dieses:

Ext.onReady(function() {
    var panel = new Ext.Panel({
        renderTo: 'divtag',
        draggable: true,
        title: 'Panel',
        width: 200,
        height:100,
        x: 20,
        y: 20
    }); //panel.show(); });
});

Ich menage patch-code zu arbeiten, wie Sie es wollen, sollte dieser code funktionieren:

Ext.onReady(function() {
    var panel = new Ext.Panel({
        renderTo: 'divtag',
        draggable: {
            insertProxy: false,
            onDrag: function(e) {
                var el = this.proxy.getEl();
                this.x = el.getX();
                this.y = el.getY();
            },
            endDrag: function(e) {
                panel.setPosition(this.x,this.y);
            },
            alignElWithMouse: function() {
                panel.dd.superclass.superclass.alignElWithMouse.apply(panel.dd, arguments);
                this.proxy.sync();
            }
        },
        title: 'Panel',
        width: 200,
        height:100,
        x: 20,
        y: 20
    }); //panel.show(); });
});

Als eine Randnotiz, ich sollte wohl Ratschläge, die Sie nicht tun dies sowieso, denn Sie definieren Ihre eigenen DD für die Systemsteuerung, die Sie verwenden können, und sogar besser Extern bereits definiert, so können Sie einfach überschreiben, Extern panel für Standard -Ext.util.ComponentDragger, oder im code ich rate Ihnen, dies zu tun:

Ext.override(Ext.panel.Panel, {
    initDraggable: function() {
        var me = this,
            ddConfig;

        if (!me.header) {
            me.updateHeader(true);
        }

        if (me.header) {
            ddConfig = Ext.applyIf({
                el: me.el,
                delegate: '#' + 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;
            }

            me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
            me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
        }
    }
});
var panel = Ext.create('Ext.panel.Panel', {
    id: 'test',
    renderTo: 'divtag',
    draggable: true,
    floating: true,
    title: 'Panel',
    width: 200,
    height:100,
    x: 20,
    y: 20
});

Code für eine initDraggable Funktion in der Systemsteuerung überschreiben stammt aus der aktuellen stabilen version von Ext.Fenster.Fenster.initDraggable Methode.

Ich bin froh, dass ich helfen konnte 🙂

InformationsquelleAutor sbgoran

2

War ich in der Lage, um es arbeiten in 4.1: müssen Sie Anführungszeichen um die id des renderTo element, wie:
```
renderTo : 'divtag',
```
Ohne Anführungszeichen, er war auf der Suche für eine Undefinierte variable namens divtag.

Einmal rannte ich, dass ich mir keine Fehler, und dann habe ich nur panel.show() zu machen.
- ich habe versucht, den code wie u sagte...hier ist es aber zeigt immer noch gleichen Fehler : Ext.onReady(function() { var panel = new Ext.Panel({ renderTo : 'divtag', draggable: { insertProxy: false, onDrag: function(e) { console.log(this); var el = this.proxy.getEl(); this.x = el.getX(); this.y = el.getY(); }, endDrag: function(e) { panel.setPosition(this.x,this.y); } }, title: 'Panel', width: 200, height:100, x: 20, y: 20 }); });
- Gotcha - klingt wie die Anführungszeichen um divtag waren ein Problem, aber nicht die geht es hier. Froh zu sehen, die gewählte Antwort gearbeitet.
InformationsquelleAutor JD Smith
0

Nur ein Vorschlag: eine Window-Komponente ist ein spezielles Panel, das eine schwimmende mixin - mag alles, was Sie brauchen.
- thnx @dmitry..das prob ist, Fenster können per ziehen und ablegen aus Titel/header..kann ich nicht ziehen Fensters von seinem Körper..in der Erwägung, dass im Falle, dass ich beschrieben habe, dass war die Arbeit in extjs 4.0.2 ein ich bin in der Lage, ziehen Sie panel aus dem Körper...
- haben Sie eine 'divtag' (definiert in html?
- ja, hier ist der code : <html> <script type="text/javascript"> Ext.onReady(function() { var panel = new Ext.Panel({ renderTo : 'divtag', draggable: { insertProxy: false, onDrag: function(e) { var el = this.proxy.getEl(); this.x = el.getX(); this.y = el.getY(); }, endDrag: function(e) { panel.setPosition(this.x,this.y); } }, title: 'Panel', width: 200, height:100, x: 20, y: 20 }); //panel.show(); }); </script> <body> <div id='divtag'> </div></body></html>
InformationsquelleAutor dbrin

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.