Highlight part of a text in an extjs textarea

Question

I need to highlight part of a text in a textarea. I have seen it done with jquery but I can't use jquery because the app I'm working on already uses extjs(the textarea is just a small part of the app). This is a link to the jquery sample: http://www.strangeplanet.fr/work/jquery-highlighttextarea/ I'm using extjs 2.3.0

message is the Extjs Textarea, I'm trying highlight text in.

var message = new Ext.form.TextArea({
        hideLabel: true,
        id: 'smshl',
        name       : 'smshl',
        emptyText: 'enter message here',
        anchor: '90%',
        allowBlank: false,
        style:'overflow:hidden;style:margin:15px;',
        height: 90,
        minLength: 1,
        minLengthText: 'You cannot send a blank text',
        maxLength: userObj.smsLength,
        maxLengthText: 'Sorry, Maximum length of message exceeded',
        preventScrollbars: true,
        enableKeyEvents: true,
        listeners:{
            keyup: function() {
                this.highlightTextarea({
                    words: ["first word","another word"]
                });
            }
        }
    })

I'm not sure I understand what's stopping you from using the jQuery plugin you linked to. It's quite possible and easy to use ExtJS and jQuery together in the same app. — existdissolve, Feb 12 '13 at 12:56
that's because I'm not sure how to do it. I tried to use the jquery plugin but it didn't work out. I've edited my question to include part of the code. — euniceadu, Feb 12 '13 at 15:28
You'll need to include the jQuery library and your plugin, try this tutorial: http://docs.jquery.com/Tutorials:Using_Ext_With_jQuery — Jordan Kasper, Feb 12 '13 at 16:16

score 1 · Accepted Answer · answered Feb 15 '13 at 18:18

I finally figured it out, all I had to do to make the code I posted in my question work was to replace this.highlightTextarea with jQuery('#'+this.getId()).highlightTextarea

So the code becomes:

var message = new Ext.form.TextArea({
        hideLabel: true,
        id: 'smshl',
        name       : 'smshl',
        emptyText: 'enter message here',
        anchor: '90%',
        allowBlank: false,
        style:'overflow:hidden;style:margin:15px;',
        height: 90,
        minLength: 1,
        minLengthText: 'You cannot send a blank text',
        maxLength: userObj.smsLength,
        maxLengthText: 'Sorry, Maximum length of message exceeded',
        preventScrollbars: true,
        enableKeyEvents: true,
        listeners:{
            keyup: function() {
                jQuery('#'+this.getId()).highlightTextarea.highlightTextarea({
                    words: ["first word","another word"]
                });
            }
        }
    })

Highlight part of a text in an extjs textarea

1 Answers1