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

时间:2014-02-21 17:37:37

标签: extjs sencha-architect

我有一个不是表格的面板,但它像表格一样使用。我需要在文本字段无效时禁用“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;

      },

2 个答案:

答案 0 :(得分:3)

以下是工作示例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);
        }
    }
});

答案 1 :(得分:0)

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



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