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
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
When we enter some data in textfield the clearIcon is dispayed.
But when the textfield loses focus the clearIcon is not displayed.
Leave Comment