Question

我有一个textfield，我想在用户看不到该值的地方完全动态屏蔽。但是标签我却没有。

例如：这是我的文本字段

{
  xtype: 'textfield',
  label: 'search',
  disabled: true,
  disabledCls: 'someCls',
  itemId: 'searchText'
}

在此功能中，我想掩盖它

function : someRendomMethod(){
    var view = view.getView();
    var textfieldData = view.down('#searchText');
    var user = view.loginData;
    if(user == "InCorrect"){
        textfieldData.inputCell.mask()
    }else{
        textfieldData.inputCell.unmask()
    }
}

在这里，我希望我的文本字段在那里，但inputcell应该是隐藏/屏蔽的。

感谢帮助

Answer 1

用户看不到该值的地方。但是标签我不是真的

因此，您可以进行自定义遮罩dom元素，并将其附加在输入dom内部。您可以使用该方法创建dom元素Ext.DomHelper.createDom()。

您可以使用Fiddle

进行检查

代码片段

JS代码

print(size)

CSS代码

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({
            xtype: 'panel',
            title: 'Demo',
            padding: 10,
            fullscreen: true,
            items: [{
                xtype: 'textfield',
                itemId: 'txtMask',
                labelAlign: 'top',
                label: 'Name',
                value: 'Test'
            }, {
                xtype: 'toolbar',
                items: ['->', {
                    xtype: 'button',
                    ui: 'action',
                    text: 'Mask',
                    handler: function (btn) {
                        var text = btn.up('panel').down('textfield'),
                            inputCell = text.el.down('.x-input-wrap-el');

                        if (btn.getText() == 'Mask') {
                            /**
                             * Create custom mask dom element
                             */
                            let maskDom = Ext.DomHelper.createDom('<div class="input-cell-masking"></div>');
                            /**
                             * append into input dom
                             */
                            inputCell.appendChild(maskDom);
                            btn.setText('Unmask');
                            /**
                             * Set the input only read mode true
                             */
                            inputCell.down('input').dom.readOnly = true;
                        } else {
                            btn.setText('Mask');
                            /**
                             * remome custom mask dom element
                             */
                            inputCell.down('.input-cell-masking').destroy();
                            /**
                             * Set the input only read mode false
                             */
                            inputCell.down('input').dom.readOnly = false;
                        }

                    }
                }]
            }]
        })
    }
});

遮罩文本字段中的遮罩

1 个答案: