O'Reilly logo

Ext JS 4 Plugin and Extension Development by Abdullah Al Mohammad

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Planning and coding of the clear button

To develop this plugin we will first create the clear button that will be rendered over the text component, and will apply the CSS styles according to the configuration options. After that, we need to add several event handlers for the clear button, such as click, mouseover, mouseout, mouseup, and mousedown, and also, several event handlers for the text component, such as destroy, resize, change, mouseover, and mouseout. Let us now start coding:

Ext.define('Examples.plugin.ClearButton', { alias : 'plugin.clearbutton', hideClearButtonWhenEmpty : true, hideClearButtonWhenMouseOut : true, animateClearButton : true, clearOnEscape : true, clearButtonCls : 'ext-ux-clearbutton', textField : null, animateWithCss3 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required