I have a bo box and a textfield. I am trying to Add a warning notifcation to the textfield stating 'please enter value' if something is selected from the bo box. However, I only want the warning to display on the textfield if '3' is selected from the bo box

Is there any way that I could do that? I am not sure how to do that.

Here is the code for my bobox and textfield:

{
                            xtype:'bo',
                            store: ['1','2','3'],
                            triggerAction: 'all',
                            fieldLabel: 'Area',
                            id: 'dcArea',
                            width: 125,
                        },{
                            xtype:'textfield',
                            fieldLabel: 'Mile',
                            id: 'mile',
                            width: 125,
                        }

I have a bo box and a textfield. I am trying to Add a warning notifcation to the textfield stating 'please enter value' if something is selected from the bo box. However, I only want the warning to display on the textfield if '3' is selected from the bo box

Is there any way that I could do that? I am not sure how to do that.

Here is the code for my bobox and textfield:

{
                            xtype:'bo',
                            store: ['1','2','3'],
                            triggerAction: 'all',
                            fieldLabel: 'Area',
                            id: 'dcArea',
                            width: 125,
                        },{
                            xtype:'textfield',
                            fieldLabel: 'Mile',
                            id: 'mile',
                            width: 125,
                        }

• javascript
• extjs
• bobox
• playframework
• textfield

• I don't usually work with extJS, so I'd suggest binding an event handler / listener to your textfield for the change event. Then check if that bobox holds the value 3. If so, display your warning. Maybe there's an easier solution with extJS, but idk. – Kiruse Commented Sep 18, 2013 at 16:28

2 Answers 2

The listener needs to be on the bo, of course. Use msgTarget to customize how the error message is displayed.

{
    xtype:'bo',
    store: ['1','2','3'],
    triggerAction: 'all',
    fieldLabel: 'Area',
    // bad practice
    // id: 'dcArea',
    width: 150,

    // <EDIT>
    msgTarget: 'under',
    // </EDIT>

    listeners: {
        change: function(bo, value) {
            // use ponent query to retrieve the other field
            var textfield = this.up('form').down('#mile');
            if (value === '3') {
                textfield.markInvalid("Please enter value");
            } else {
                textfield.clearInvalid();
            }
        }
    }
},{
    xtype:'textfield',
    fieldLabel: 'Mile',
    itemId: 'mile',
    width: 150
}

Edit Use the msgTarget property of the bo box to configure how the error message is displayed (see the updated code example).

In extjs this is the way to add listeners, on change will be helpful in this case. Sample:

              {
                    xtype:'textfield',
                    fieldLabel: 'Mile',
                    id: 'mile',
                    width: 125,
                    name: 'myMiles'
                    listeners: {
                         'change': function() {
                          console.log('you changed the text of this input field');
                          var value = Ext.getCmp('mile').getValues().myMiles;
                          if(value == 3)
                          {
                            alert('You selected 3');
                          }
                        }
                    }
              }