CODEWITHSUNDEEP
extjs
zibi
zibi

Reputation: 3313

Add custom message (not error) under under combobox/text field

I'm new to extjs and I'm looking for a way to add some custom message under my combobox field.

Depending on some conditions (eg. value selected) the message needs to have different text and/or style.

I could play with errorEl associated with my combobox and change it's message/style depending on the state, but this doesnt look like a good approach.

Are you aware of any plugin allowing to add such a message, or is there a shorter way to do this?

Thank you for your suggestions. I ended up writing my own plugin, which then I attached to combobox.

I added new element after error element and I changed messages based on proper combobox events.

afterCmpRender : function() {
    var me = this, cmp = me.getCmp();

    var messageWrapper = {
        tag : 'div'
    };
    var messageEl = cmp.errorEl.insertSibling(messageWrapper, "after");
    cmp.messageEl = messageEl;

    Ext.Array.each(me.messages, function(message) {
        var messageConfig = {
            tag : 'div',
            style : {
                display : 'none'
            }
        };
        var newElement = messageEl.insertSibling(messageConfig, "after");
        newElement.setHTML(message.value);
        newElement.addCls(message.classes);
        me.registerMessageEvents(me, cmp, message, newElement);
    });
}

Upvotes: 0

Views: 640

Answers (2)

JuHwon
JuHwon

Reputation: 2063

I'd work with the class Ext.tip.Tip.

You can create 

Ext.create('Ext.tip.Tip', {
    id: 'myTip',
    header: false
});

and then 

var tip = Ext.getCmp('myTip');
tip.update('your custom tip message');
tip.showBy(comboboxComponent);

You could also use showAt(..) instead of showBy. For more information look into the Docu

Here is a Fiddle link to an example.

Upvotes: 1

Alexander
Alexander

Reputation: 20224

I almost always use multiple elements for this, and would not make an attempt to change the field.

Depending on your context, which you didn't provide, I'd say you could have a look at:

  • Ext.form.field.Display
  • Ext.form.Label
  • Ext.tip.Tip
  • Ext.tip.QuickTip

Upvotes: 1

Related Questions