javascript – ExtJs形成多个按钮,用于不同的绑定

需要为不同的按钮分别绑定我的表单元素.在元素中使用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.
  },
  ............
});

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

解决方法:

没有标准的快速方法可以做到这一点,你可能想为此编写一个插件.我把一个放在一起：

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