Question

我有一个不是表格的面板，但它像表格一样使用。我需要在文本字段无效时禁用“addButton”按钮。文本Field的验证器功能中的禁用有效，但在视觉上按钮仍然显示为启用。如何通过我的文本字段上的验证器方法告知按钮被视觉禁用？

以下是代码：

      items: [
    {
      xtype: 'textfield',
      validator: function(value) {
        var reg = /^\d+(,\d+)*$/;
        var addButton =  this.ownerCt.down('[itemId=addButton]');
        if (reg.test(value)===false) {
          addButton.disabled=true;
          addButton.allowDepress=false;
          return "Enter whole numbers separated by comma";

        }
        addButton.disabled=false;
        addButton.allowDepress=false;
        return true;

      },

Answer 1

以下是工作示例http://jsfiddle.net/H76fQ/2/

var button = Ext.create('Ext.button.Button',{
    renderTo: Ext.getBody(),
    text: 'Ok',
    disabled: true
});

Ext.create('Ext.form.field.Text',{
    allowBlank: false,
    renderTo: Ext.getBody(),
    listeners:{
        afterrender: function(){
            this.validate();
        },
        validitychange: function(me, isValid){
            button.setDisabled(!isValid);
        }
    }
});

Answer 2

要禁用FormPanel的提交按钮，您可以将FormPanel的monitorValid设置为true，并将提交按钮的formBind设置为true。

＆＃13;

items: [{
  xtype: 'ux.form',
  monitorValid: true, // Must be added 
  layout: {
  type: 'hbox',
  align: 'start',
  pack: 'stretch'
  },
  items: [{
    name:"testing",
    xtype:'textfield',
    fieldLabel:'Test',
    allowBlank:false,   // This is the property which will check the validation
    },
    {
    xtype: 'ux.button',
    text: 'Submit',
    width: 120,
    formBind: true
  }]
}]

＆＃13;

禁用面板上不是表单的按钮

2 个答案: