Cómo construir conjuntos de campos arrastrables en ExtJS 3.x

drag-and-drop extjs3

Question

Me gustaría construir un FormPanel de ExtJS que permita al usuario reordenar una lista de conjuntos de campos usando arrastrar y soltar.

Veo que es muy fácil hacer los conjuntos de campos movibles usando draggable: verdadero , pero ¿cómo configuro Dropzone? Intenté seguir una serie de ejemplos, pero no tuve mucha suerte.

MyApp.FormPanel = Ext.extend(Ext.FormPanel,{
title: ''Fields'',
fieldSetCount: 0,
constructor: function(config){
Ext.apply(this, config);
this.tbar = [{
text: ''Add Field Set'',
handler: this.addFieldSet,
scope: this
}];
MyApp.FormPanel.superclass.constructor.call(this, config);
},
addFieldSet: function(){
this.add({
xtype: ''fieldset'',
title: ''Fieldset '' + this.fieldSetCount++,
draggable: true
});
this.doLayout();
},
});

Answer 1

¡Necesita implementar Ext.dd.DropZone para archivar esto! Consulte la API Ext.JS 3.x para obtener más detalles sobre este

El siguiente ejemplo no se ha probado, ¡pero debería mostrarte el truco!

FormDropZone = function (form, config) {
this.form = form;
FormDropZone.superclass.constructor.call(this, form.view.scroller.dom, config);
};
Ext.extend(FormDropZone, Ext.dd.DropZone, {
onContainerOver: function (dd, e, data) {
return dd.form !== this.form ? this.dropAllowed : this.dropNotAllowed;
},
onContainerDrop: function (dd, e, data) {
if (dd.form !== this.form) {
this.form.onFormDrop(this.form, data.selections, dd.form);
return true;
}
else {
return false;
}
},
containerScroll: true
});
DDform = Ext.extend(Ext.form.formPanel, {
// configuration
initComponent: function () {
var config = {};
Ext.apply(this, Ext.apply(this.initialConfig, config));
DDform.superclass.initComponent.apply(this, arguments);
},
onRender: function () {
DDform.superclass.onRender.apply(this, arguments);
this.dz = new FormDropZone(this, { ddGroup: this.ddGroup || ''formDD'' });
},
onFormDrop: Ext.emptyFn
});

¡Espero que esto te ayude!