Home > DeveloperSection > Articles > To Hide/Unhide the ClearIcon Property of TextField in Sencha Touch

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


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 5461  View(s)
Rate this:

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

In this article, I’m explaining how to hide/ unhide the clearIcon property of textfield in Sencha Touch.

ClearIcon property of textfield shows a icon on right corner of textfield, this icon removes the value of textfield when tapped/clicked. According to our need, we want to show the clear icon only when the focus is set to the textfield otherwise it will hide.

To achieve this you have to follow some simple steps:

Step 1:

Design a form using FormPanel

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

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

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

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

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


Don't want to miss updates? Please click the below button!

Follow MindStick