ExtJs爲不同的綁定形成多個按鈕

Question

需要分別爲不同的按鈕綁定我的表單元素。在元素中使用allowBlank來發送綁定條件，並在按鈕中使用formBind來綁定按鈕。需要以這種最簡單的方式來做到這一點。 （ExtJS的4.2.1經典）

例

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

沒有標準快速的方法來做到這一點，你可能要爲此編寫一個插件。我已經把一個：

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 2

我爲您創建了一個fiddle。該代碼分別使用bind和formBind作爲兩個不同的按鈕。可能你想要這樣的東西。

Answer 3

我在這裏創建了一個小提琴，我認爲應該完成你想要做的事情。這個想法使用事件監聽器組合框，而不是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. 
    }] 
});