Search code examples
javascripthtmlextjssencha-touchsencha-touch-2

How to add attribute to Text field in Sencha Touch?

I have to add attribute to some text filed and number fields in my Sencha touch form. there I didn't find any config option, that we can set attribute to these fields/controls.

Is there any option provided by Sencha Touch to add attributes to these controls?

like below html code/cotrols I need to set attribute in my sencha touch controls. if is there any way, please suggest me. your help will be valuable for me.

This is HTML code. I want to set my Sencha filed like this attribute added in html code. here you can see data-openpay-card is added as attribute

<html>
<label>Nombre del titular</label><input type="text" name="holder" placeholder="Como aparece en la tarjeta" autocomplete="off" data-openpay-card="holder_name"></input>
<label>Número de tarjeta</label><input type="text" name="card" autocomplete="off" data-openpay-card="card_number"></div <div class="sctn-col half l"><input type="text" name="month" placeholder="Mes" data-openpay-card="expiration_month"></div>
<div class="sctn-col half l"><input type="text" name="year" placeholder="Año" data-openpay-card="expiration_year"></div>

</html>
Solution

  • @Vikas In ExtJS, they have inputAttrTpl config. Using this its very easy to define the attributes directly to the input element of the textfield component.

    But in Sencha Touch this config is not present for the text field. What you need to do is -

    1. Listen to the painted event
    2. In this event using the textfield element that is coming as a parameter, you can find the corresponding input element by doing a query.
    3. then set the attribute using set method

    Pleae refer following fiddle -

    https://fiddle.sencha.com/#view/editor&fiddle/2kvu