如何在 ExtJS 3.x 中构建可拖动的字段集

Posted 2023-02-26

【中文标题】如何在 ExtJS 3.x 中构建可拖动的字段集

【英文标题】：How to build draggable field sets in ExtJS 3.x

【发布时间】：2011-10-11 11:31:08

【问题描述】：

我想构建一个 ExtJS FormPanel，允许用户使用拖放操作重新排序字段集列表。

我看到使用 draggable: true 可以很容易地使字段集可移动，但是如何设置 dropzone？我尝试了许多示例，但运气不佳。

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】：

您需要实施 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
);

希望对您有所帮助！