Отключить кнопку на панели, которая НЕ является формой

У меня есть панель, которая не является формой, но используется как форма. Мне нужно отключить кнопку «addButton», когда текстовое поле недействительно. Отключение в функции валидатора текстового поля работает, но визуально кнопка по-прежнему выглядит включенной. Как я могу сказать, что кнопка должна быть визуально отключена с помощью метода проверки в моем текстовом поле?

Вот код:

      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;

      },

extjs sencha-architect
person Daniel Williams    schedule 21.02.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вот рабочий пример 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);
        }
    }
});
person Boris Gappov    schedule 21.02.2014
comment
Да, мне нужно было вызвать эту функцию setDisabled, а не свойство напрямую. Теперь это работает как шарм - спасибо! - person Daniel Williams; 22.02.2014

arrow_upward
0
arrow_downward

Чтобы отключить кнопку отправки FormPanel, вы можете установить для монитора FormPanel значение 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
  }]
}]

person gem007bd    schedule 28.05.2018