Привязка кнопки окна для формирования валидации

Question

Я пытаюсь использовать formBind: true на кнопке, чтобы включить/отключить его в модальном окне в соответствии с состоянием проверки формы.

Я хочу, чтобы пользователь должен был подтвердить номер аккредитации, и эта проверка работает разумно. Однако я не могу привязать кнопку к состоянию проверки. Я попытался подключить некоторые обработчики событий в текстовых полях, чтобы вручную обработать это, но обработчики событий не срабатывают.

Смотрите эту скрипку бегущего код: https://fiddle.sencha.com/#fiddle/1jrj

Ext.define('MyApp.view.util.dialogs.Accreditation', { 
    extend: 'Ext.window.Window', 
    title: '', 
    config: { 
     name: '' 
    }, 
    modal: true, 


    initComponent:function() { 
     var me = this; 


     this.title = this.name + ' Accreditation'; 

     var accreditation1 = new Ext.form.TextField({ 
      fieldLabel: 'Accreditation', 
      growMin: 250, 
      allowBlank: false 
     }); 

     // doesn't fire 
     // accreditation1.addListener('activate', function(dis , eOpt) {Ext.Msg.alert("woopy twang");}, this); 


     var accreditation2 = new Ext.form.TextField({ 
      fieldLabel: 'Confirm', 
      growMin: 250, 
      allowBlank: false, 
      validator: function(value){ 
       if (accreditation1.getValue() != value){ 
        return 'Accreditation numbers must match.' 
       } 
       return true; 
      } 
     }); 


     var button1 = new Ext.button.Button({ 
      xtype: 'button', 
      text: 'OK', 
      itemId: 'btnOK', 
     formBind: true 

     }); 


     var button2 = new Ext.button.Button({ 
      xtype: 'button', 
      text: 'Cancel', 
      itemId: 'btnCancel', 
      handler: function() { 
       this.up('window').close(); 
      } 
     }); 

     this.items = [ 
      { 
       html: '<h5>Enter your Accreditation Number for ' + this.name + '</h5>' 
      }, 
      accreditation1, 
      accreditation2 
     ] 

      this.buttons = [ 
        button1,button2 
     ] 



     me.callParent(arguments); 
    }, 
    handlers: { 
     activate : function(dis, opts) { 
      Ext.Msg.alert('activate'); 
      } 
    } 


}); 

Answer 1

Проблема заключается в том, что вы не имеете FormPanel. From the docs:

Когда внутри FormPanel, любой элемент, сконфигурированный с formBind: true будет включен/выключен в зависимости от состояния действия формы.

Ваш пример не содержит панели формы. Если поставить FormPanel в окно, и поместить кнопки в форме, а не в окно, она работает:

this.layout='fit'; 
    this.items = [{ 
     xtype:'form', 
     items:[ 
      { 
       html: '<h5>Enter your Accreditation Number for ' + this.lenderName + '</h5>' 
      }, 
      accreditation1, 
      accreditation2 
     ], 
     buttons: [ 
      button1,button2 
     ] 
    }]