ExtJS 7.3.1 modern -在文本字段中显示静态文本

a64a0gku  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(235)

我试图在textfield中显示静态文本,例如%符号。有没有办法做到这一点?如果我使用tplhtml属性,文本会显示在新的一行。看起来classic中有一个afterSubTpl属性,现代工具包中有类似的东西吗?
谢谢你的帮助!

编辑

我试图实现这样的东西:

%应该静态地显示在输入文本的后面,并且在输入文本的长度增加时移动。

xmjla07d

xmjla07d1#

我发现了一个解决方案,可以在输入值后显示一些文本。这将适用于所有从Ext.field.Text扩展的字段。

Ext.define('MyApp.overrides.field.Text', {
    override: 'Ext.field.Text',

    config: {
        suffix: null
    },

    setSuffix: function (suffix) {
        this.callParent(arguments);

        this.setBind({
            data: {
                value: `{${this.getBind().value.stub.path}}`
            }
        });

        let field = this.inputElement,
            tpl = new Ext.XTemplate(
                `<div style="left: {value:this.getWidth}px; top: 0; position:absolute; pointer-events: none">${suffix}</div>`, {
                    getWidth: function (value) {
                        return field.getTextWidth(value) + 3;
                    }
                });
        this.setTpl(tpl);
    }
});

要使用它,您可以执行以下操作:

xtype: 'textfield',
bind: {
    value: '{myProperty}'
},
suffix: '%'

也可以进行动态绑定:

xtype: 'textfield',
bind: {
    value: '{myProperty}',
    suffix: '{mySuffix}'
}

相关问题