Ce code fonctionne dans Extjs 4.0.2a mais une fois converti en 4.1, il ne fonctionne plus et donne une erreur
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
});
});
3 réponses
Apparemment, il y a un bogue dans cette version d'Ext. Cela ne fonctionnera pas même si vous essayez D'n'D par défaut pour un panneau comme celui-ci:
Ext.onReady(function() {
var panel = new Ext.Panel({
renderTo: 'divtag',
draggable: true,
title: 'Panel',
width: 200,
height:100,
x: 20,
y: 20
}); //panel.show(); });
});
Je pense à patcher le code pour qu'il fonctionne comme vous le souhaitez, ce code devrait fonctionner:
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(); });
});
En guise de remarque, je devrais probablement vous conseiller de ne pas le faire de toute façon, car vous pouvez définir votre propre DD pour le panneau que vous pouvez utiliser, et encore mieux Ext en a déjà un défini, vous pouvez donc simplement remplacer le panneau Ext pour utiliser la valeur par défaut Ext.util.ComponentDragger, ou dans code, je vous conseille de faire ceci:
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
});
Le code d'une fonction initDraggable
dans la substitution de panneau est tiré de la version stable actuelle de Méthode Ext.window.Window.initDraggable.
Juste une suggestion: un composant Window est un panneau spécialisé qui a un mix flottant - pourrait être tout ce dont vous avez besoin.
J'ai pu le faire fonctionner en 4.1: vous devez ajouter des guillemets autour de l'id de l'élément renderTo, comme:
renderTo : 'divtag',
Sans guillemets, il cherchait une variable non définie nommée divtag.
Une fois que j'ai couru, je n'ai eu aucune erreur, puis j'ai fait panel.show()
pour le rendre.
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.