Clearing Search Box on the click of X button which is inside it using extjs

Question

Clearing Search Box on the click of X button which is inside it using extjs . It should also have mouse over states. Can anyone please help with the code or how to proceed. Any help would be appreciated.

Below is the code in which i want to add the functionality :-

var tools = [{
                xtype: 'label', 
                id: 'search-filter-label',
                text: 'Search'
            }, ' ', {
                xtype: 'textfield',
                id: 'search-filter',
                selectOnFocus: true,
                width: 100,
                listeners: {
                    'render': {fn:function(){
                        Ext.getCmp('search-filter').getEl().on('keyup', function(){
                            this.filter();
                        }, this, {buffer:50});
                    }, scope:this}
                }
        }];

Answer 1

check out these links:

How to put X inside textfield to clear text in extjs

http://www.sencha.com/forum/showthread.php?132775-Ext.ux.form.field.ClearButton-Small-clear-button-icon-over-field

Answer 2

check out these link:

Code: learnsomethings.com/fcps_checks/js/app.js

Working Example: learnsomethings.com/fcps_checks/index.html