Как создавать перетаскиваемые наборы полей в ExtJS 3.x - PullRequest
Новая
       3

Как создавать перетаскиваемые наборы полей в ExtJS 3.x

8 голосов
/ 11 октября 2011

Я хотел бы создать ExtJS FormPanel, которая позволяет пользователю переупорядочивать список наборов полей с помощью перетаскивания.

Я вижу, что очень просто сделать наборы полей подвижными с помощью draggable: true , но как настроить зону сброса?Я пытался следовать ряду примеров, но мне не очень повезло. 

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();
    },
});

1 Ответ

3 голосов
/ 25 октября 2011

Вам необходимо реализовать Ext.dd.DropZone для архивирования этого!См. Ext.JS 3.x API для получения дополнительной информации об этом

Следующий пример не проверен, но он должен показать вам хитрость! 

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
});

Надеюсьэто тебе поможет!

...