How to add attribute to Text field in Sencha Touch?

Question

How to add attribute to Text field in Sencha Touch?

1.3k views Asked by Vikas Hire At 31 August 2018 at 07:00

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>

Original Q&A

There are 2 answers

Rohit Sharma On 31 August 2018 at 07:33

You can set attributes like below:-

{
    xtype: 'textfield',
    name: 'name',
    label: 'Name',
    listeners: {
        painted: function (el, eOpts) {
            el.dom.querySelector('input').setAttribute('data-openpay-card', 'your-value');
        }
    }
}

Working Fiddle

Hope this will help/guide you to achieve your requirement.

**4zh4r_s4l4ti** · Accepted Answer · 2018-08-31T10:30:00+00:00

@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 -

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

Pleae refer following fiddle -

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

TechQA.

How to add attribute to Text field in Sencha Touch?

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in EXTJS

Related Questions in SENCHA-TOUCH

Related Questions in SENCHA-TOUCH-2

Popular Questions

Popular Tags

Trending Questions