綁定一個窗口按鈕來形成驗證

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 
     ] 
    }]