如何在Sencha Touch的“文本”字段中添加属性?

时间:2018-08-31 07:00:38

标签: javascript html extjs sencha-touch sencha-touch-2

我必须在我的Sencha触摸表单中为某些文本字段和数字字段添加属性。我没有找到任何配置选项,我们可以将属性设置为这些字段/控件。

Sencha Touch是否提供任何选项来向这些控件添加属性?

就像下面的html代码/控件一样,我需要在sencha触摸控件中设置属性。如果有任何办法,请建议我。您的帮助对我来说将是宝贵的。

这是HTML代码。我想设置我的Sencha文件,就像在HTML代码中添加的此属性一样。在这里您可以看到data-openpay-card已添加为属性

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

2 个答案:

答案 0 :(得分:2)

@Vikas在ExtJS中,它们具有inputAttrTpl配置。使用此方法,很容易直接将属性定义为文本字段组件的输入元素。

但是在Sencha Touch中,文本字段不存在此配置。您需要做的是-

  1. 听绘画事件
  2. 在这种情况下,使用文本字段元素作为参数,您可以通过查询找到相应的输入元素。
  3. 然后使用set方法设置属性

请参考以下小提琴-

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

答案 1 :(得分:1)

您可以设置如下属性:-

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

Working Fiddle

希望这会帮助/指导您达到要求。