ExtJs form several buttons for different bindings

Question

It is necessary to bind form elements separately for different buttons. Using allowBlank in elements to send binding conditions and formBind in buttons for button binding. You need to do this, as it is in the simplest way. (ExtJs 4.2.1 Classic)

Example

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

If you need other data or details, please feel free to ask.

Answer 1

There is no standard quick way to do this, you can write a plugin for this. I put together one:

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

You can use this plugin on your buttons like this:

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

In the depFields configuration depFields you specify links to the fields on which the state of the button depends, and the plug-in will control these fields, so when the value of each field changes, it will update the disabled state.

Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/28cm

Answer 2

I created a fiddle here, which I think should do what you are trying to do. The idea is to use an event listener in combobox instead of configuring the formBind Download button: 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 3

I created a fiddle for you. For two different buttons, the code uses bind and formBind respectively. Maybe you want something like that.