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 설정에서 당신은 버튼의 비활성화 상태에 따라 필드에 대한 참조를 지정하고, 플러그 인은 이러한 필드를 모니터링하므로 각 필드 값이 변경되면 비활성화 된 상태가 업데이트됩니다. 당신이 사용하는 ExtJS에 어떤 버전의 https://fiddle.sencha.com/#view/editor&fiddle/28cm

Answer 2

나는 fiddle을 생성했습니다. 이 코드는 두 개의 서로 다른 버튼에 각각 bind과 formBind을 사용합니다. 이런 식으로하고 싶습니까?

Answer 3

나는 당신이하려는 일을 성취해야한다고 여기에서 바이올린을 만들었습니다. 아이디어는 대신 Download 버튼의 formBind 설정의, 콤보 상자에 이벤트 리스너를 사용하는 이런 일을하기위한 표준 빠른 방법은 없습니다 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. 
    }] 
});