Désactiver/activer les déclencheurs à partir du champ de texte

Question

Je ne suis pas très familier avec toutes les liaisons et configs dans Ext Js. J'ai donc un champ de texte avec un bouton email (mailto). Je veux activer ou désactiver le bouton seulement. Mais je ne sais pas comment commencer à manipuler le déclencheur lui-même. Alors j'ai essayé de faire une reliure dans mon ViewController comme ceci:

txtContactEmail:{ 
    disabled: {someFunctionInViewModel} 
}//this disables/enables the whole control 
//I only want the trigger button to be disabled/enabled 

C'est le code de la vue créée dans l'architecte sencha.

{ 
    xtype: 'textfield', 
    flex: 2, 
    itemId: 'txtContactEmail', 
    margin: '0 5 0 0', 
    fieldLabel: 'Email', 
    labelWidth: 35, 
    validateOnChange: false, 
    validateOnBlur: false, 
    triggers: { 
      trgEntityEmail: { 
       cls: 'x-form-email-trigger' 
      } 
    } 
} 

Answer 1

Juste pour voir la liaison sur un déclencheur, ce code en ligne peut être utile. Il lie la config hideTrigger d'un champ de texte à une propriété View Model. Ce Fiddle a le code de travail.

Ext.create('Ext.form.field.Text', { 
     viewModel: { 
      data: { 
       x: false 
      } 
     }, 
     flex: 2, 
     itemId: 'txtContactEmail', 
     margin: '0 5 0 0', 
     fieldLabel: 'Email', 
     labelWidth: 35, 
     validateOnChange: false, 
     validateOnBlur: false, 
     //Bind to x property of View Model 
     bind: { 
      hideTrigger: '{!x}' 
     }, 
     triggers: { 
       trgEntityEmail: { 
        cls: 'x-form-email-trigger' 
       } 
     } 
    }); 

Une autre façon pourrait être de lier la config hideTrigger à une autre configuration d'un champ de texte, par exemple. valeur. Ce code en ligne montre cette approche. Vous pouvez le vérifier here.

Ext.create('Ext.form.field.Text', { 
       viewModel:{}, 
       flex: 2, 
       itemId: 'txtContactEmail', 
       margin: '0 5 0 0', 
       fieldLabel: 'Email', 
       labelWidth: 35, 
       validateOnChange: false, 
       validateOnBlur: false, 
       //Set a reference on textfield and publish its value 
       // Use this reference to do the binding 
       value: 'Some Value', 
       reference: 'mytextfield', 
       publishes: ['value'], 
       bind: { 
        hideTrigger: '{mytextfield.value}' 
       }, 
       triggers: { 
        trgEntityEmail: { 
         cls: 'x-form-email-trigger' 
        } 
       } 
      }); 

Answer 2

Ext.field.trigger.Trigger ne peut pas être activé/désactivé de la boîte.

Je pense que vous pouvez émuler désactiver l'état comme celui-ci

var myTrigger = myTextField.getTriggers()['trgEntityEmail']; 
// Apply disabled style with .setCls() or .setIconCls() 
myTrigger.setIconCls('my-disabled-icon'); 
// Remove handler 
myTrigger.sethandler(Ext.emptyFn);