ExtJs表单多个按钮,用于不同的绑定

我在这里创造了一把小提琴,我认为它应该完成你想要做的事情。在组合框上使用事件侦听器,而不是 formBind 配置 Download https://fiddle.sencha.com/#view/editor&fiddle/289a

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    itemId: 'exampleForm',
    items: [Ext.create('Ext.form.field.Date', {
            allowBlank: false, //bind for both search & download button.
        }),
        Ext.create('Ext.form.ComboBox', {
            allowBlank: false, //bind for only download button.
            listeners: {
                change: function (thisCombo, newValue, oldValue, eOpts) {
                    if (Ext.isEmpty(newValue)) {
                        thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(true);
                    } else {
                        thisCombo.up('#exampleForm').down('#btnDownload').setDisabled(false);
                    }
                }
            },
            store: ['item1', 'item2']
        })
    ],
    buttons: [{
        text: 'Search',
        formBind: true, /// Need to bind for specific field only.
    }, {
        itemId: 'btnDownload',
        text: 'Download',
        disabled: true
            //formBind: true, /// Need to bind for all.
    }]
});

没有标准的快速方法可以做到这一点,你可能想为此编写一个插件。我总结了一个:

Ext.define('App.plugin.MultiDisableBind', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.multidisablebind',

    /**
     * @cfg
     * Reference to the fields that this button depends on.
     * Can contain either direct references, or a query selectors that will be
     * executed with the button as the root
     */
    depFields: null,

    /**
     * @property
     * A map object with field ids as key, and field values as value
     */
    valuesMap: null,

    init: function (cmp) {
        this.setCmp(cmp);

        cmp.on('render', this.setup, this);
    },

    setup: function () {
        var cmp = this.getCmp(),
            depFields = this.depFields,
            valuesMap = {};

        if (!Ext.isArray(depFields)) {
            depFields = [depFields];
        }

        Ext.Array.forEach(depFields, function (field) {
            if (Ext.isString(field)) {
                field = cmp.query(field)[0];
            }

            cmp.mon(
                field,
                'change',
                Ext.Function.createThrottled(this.updateValuesMap, 300, this),
                this
            );
            valuesMap[field.getId()] = field.getValue();
        }, this);

        this.valuesMap = valuesMap;
        this.updateCmpDisabled();
    },

    updateValuesMap: function (depField, newValue) {
        this.valuesMap[depField.getId()] = newValue;
        this.updateCmpDisabled();
    },

    updateCmpDisabled: function () {
        var cmp = this.getCmp(),
            toDisable = true;

        Ext.Object.each(this.valuesMap, function (fieldId, fieldValue) {
            if (!Ext.isEmpty(fieldValue)) {
                toDisable = false;
                return false
            }
        });

        cmp.setDisabled(toDisable);
    }
});

您可以在按钮中使用此插件,如下所示:

xtype: 'button',
text: 'My button',
plugins: {
    ptype: 'multidisablebind',
    depFields: ['^form #fieldQuery', fieldVar]
}

在 depFields 配置您指定对按钮的禁用状态所依赖的字段的引用,插件将监视这些字段,以便在每个字段值更改时更新禁用状态。

这是一把小提琴: https://fiddle.sencha.com/#view/editor&fiddle/28cm

我创建了一个 fiddle 为你。代码使用 bind 和 formBind 分别用于两个不同的按钮。也许你想要这样的东西。