Question

需要为不同的按钮分别绑定我的表单元素。在元素中使用allowBlank发送绑定条件，使用formBind在按钮中绑定按钮。需要像这种最简单的方式这样做。（ExtJs 4.2.1 Classic）

示例

Ext.create('Ext.form.Panel', {
 ......
 items: [
  Ext.create('Ext.form.field.Date', {
   .....,
   allowBlank: false, //bind for both search & download button.
   .....
  }),
  ......, //// All rest elements bind for both search & download button.
  Ext.create('Ext.form.ComboBox', {
   ......,
   allowBlank: false, //bind for only download button.
   ......
  })
 ],
 buttons: [
  {
   text: 'Search',
   formBind: true,  /// Need to bind for specific field only.
  },
  {
   text: 'Download',
   formBind: true,  /// Need to bind for all.
  },
  ............
});

如果需要任何其他数据或细节，请不要犹豫。

Answer 1

我在这里创造了一个小提琴，我认为应该完成你想要做的事情。在组合框上使用事件监听器的想法，而不是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.
    }]
});

Answer 2

没有标准的快速方法可以执行此操作，您可能需要为此编写插件。我把一个放在一起：

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

Answer 3

我为你创建了一个PyTupleObject struct contains。代码分别使用formBind和append作为两个不同的按钮。也许你想要这样的东西。

ExtJs形成多个按钮，用于不同的绑定

3 个答案: