---
title: "To Hide/Unhide the ClearIcon Property of TextField in Sencha Touch"  
description: "In this article, I’m explaining how to hide/ unhide the clearIcon property of textfield in Sencha Touch."  
author: "Sumit Kesarwani"  
published: 2013-06-05  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1312/to-hide-unhide-the-clearicon-property-of-textfield-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 5 minutes  

---

# To Hide/Unhide the ClearIcon Property of TextField in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining how to hide/ unhide the clearIcon [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) of textfield in [Sencha Touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

ClearIcon property of textfield [shows](https://yourviews.mindstick.com/view/81702/unicef-report-shows-children-deprived-of-online-classes-in-corona-lockdown) a icon on [right](https://www.mindstick.com/articles/23257/how-to-find-the-right-design-agency-for-your-logo-design) corner of textfield, this icon removes the [value](https://www.mindstick.com/articles/23219/an-optimized-description-adds-value-to-experience-and-in-turn-effectively-guest-posting-packages) of textfield when tapped/clicked. According to our need, we want to show the clear icon only when the [focus](https://www.mindstick.com/blog/12314/how-to-improve-your-focus-at-work) is set to the textfield otherwise it will hide.

To achieve this you have to follow some [simple](https://www.mindstick.com/blog/63525/get-the-most-out-of-maths-with-these-8-simple-tricks) steps:

##### Step 1:

[Design](https://www.mindstick.com/articles/23215/the-secret-to-a-compelling-logo-design) a [form](https://yourviews.mindstick.com/view/87344/explained-the-benefits-of-short-form-videos) using FormPanel

![To Hide/Unhide the ClearIcon Property of TextField in Sencha Touch](https://www.mindstick.com/mindstickarticle/2809efd3-7dc1-4a51-8976-608842f2117e/images/577d8b3c-2247-4878-9320-4e89742f50e9.png)

```
Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
 
    config: {
        fullscreen: true,
        items: [
            {
                xtype: 'textfield',
                id: 'field1',
                itemId: 'field1',
                label: 'Field'
            },
            {
                xtype: 'textfield',
                id: 'field2',
                itemId: 'mytextfield1',
                label: 'Field'
            },
            {
                xtype: 'button',
                itemId: 'mybutton',
                text: 'Click'
            }
        ]
});
```

By default, the clearIcon property of the textfields is true.

##### Step 2:

Now add the events to the textfields and button.

```
listeners: [
            {
                fn: 'onField1Focus',
                event: 'focus',
                delegate: '#field1'
            },
            {
                fn: 'onField1Blur',
                event: 'blur',
                delegate: '#field1'
            },
            {
                fn: 'onField2Blur',
                event: 'blur',
                delegate: '#field2'
            },
            {
                fn: 'onField2Focus',
                event: 'focus',
                delegate: '#field2'
            },
            {
                fn: 'onMybuttonTap',
                event: 'tap',
                delegate: '#mybutton'
            }
        ]
```

On both the textfields, I have added the focus and blur event and the tap event to the button.

##### Step 3:

Now add a css file to our application

To add a css file, you go to resources and select css resource.

This will create a css file and give url(name of css) and id(to identify uniquely) to the css file and write the following code in it.

```
.x-field-clearable.clear-icon-hidden .x-field-input .x-clear-icon
{
  display: none;
}
```

This code will hide the clearIcon from the textfield.

##### Step 4:

Now add some definitions to events of textfields and button

```
    onField1Focus: function(textfield, e, eOpts) {
        textfield.removeCls('clear-icon-hidden');
    },
 
    onField1Blur: function(textfield, e, eOpts) {
        textfield.addCls('clear-icon-hidden');
    },
 
    onField2Blur: function(textfield, e, eOpts) {
        textfield.addCls('clear-icon-hidden');
    },
 
    onField2Focus: function(textfield, e, eOpts) {
        textfield.removeCls('clear-icon-hidden');
    },
 
    onMybuttonTap: function(button, e, eOpts) {
        var msgBox = new Ext.MessageBox();
        msgBox.show({
            message : 'Button Clicked',
            buttons : [{text : 'Ok', itemId : 'Ok'}],
            style : 'background-color : #EEE'
        });
    }
```

textfield.addCls() is used to add the css file and textfield.removeCls() is used to remove the css file.

##### Output

![To Hide/Unhide the ClearIcon Property of TextField in Sencha Touch](https://www.mindstick.com/mindstickarticle/2809efd3-7dc1-4a51-8976-608842f2117e/images/dd364469-f004-42c9-96d0-df80ec10a654.png)

When we enter some data in textfield the clearIcon is dispayed.

![To Hide/Unhide the ClearIcon Property of TextField in Sencha Touch](https://www.mindstick.com/mindstickarticle/2809efd3-7dc1-4a51-8976-608842f2117e/images/4ae5f7d0-3111-4860-8128-e114a42ac4d6.png)

But when the textfield loses focus the clearIcon is not displayed.

---

Original Source: https://www.mindstick.com/articles/1312/to-hide-unhide-the-clearicon-property-of-textfield-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.