Question

我有一个textfield，里面有大量文字，我无法全部显示。

我需要tooltip才能显示textfield上mouseover的所有文本。但是我无法使用text: c.getValue()实现它。如果我输入诸如text: "MyToolTips"之类的自定义字符串，则一切正常。我尝试使用afterrender并显示相同的结果-没有任何内容，空tooltip。

这是我的代码：-

{
    xtype: 'textfield',
    name: 'InfoTypingName',
    fieldLabel: 'MyLable',
    labelWidth: 200,
    readOnly: true,
    listeners: {
        show: function (c) {
            Ext.QuickTips.register({
                target: c.getEl(),
                text: c.getValue(),
                enabled: true,
                showDelay: 20,
                trackMouse: true,
                autoShow: true
            });
        }
    }
}

Answer 1

您可以这样尝试：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.QuickTips.init();

        var verylongText="This is very long text. somewhat around too long. and still going on. Oh its still there.";

        for(var i=0;i<4;i++) {
            verylongText = verylongText + verylongText;
        }

        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Textfield with tooltip',
            items: [{
                xtype: 'textfield',
                padding: 10,
                id: 'uniqueId',
                value: verylongText,
                readonly:true,
                listeners: {
                    afterrender: function (me) {
                        console.log(arguments);
                        var a=Ext.create('Ext.tip.ToolTip', {
                            dismissDelay: 5000000,
                            target: 'uniqueId',
                            html: '<div style="display:flex;word-break:break-all;">' + me.getValue() + '</div>',
                            width: 'auto',
                        });
                    }
                }
            }]
        })
    }
});

链接到工作提琴： https://fiddle.sencha.com/#view/editor&fiddle/2khp

Answer 2

您可以按以下方式进行操作：-

listeners: {
    afterrender: function (me) {
        // your POST request goes here
        Ext.Ajax.request({
            url: "data.json",
            method: "POST",
            success: function (response) {
                // set the value got from request
                me.setValue(Ext.decode(response.responseText).data.value);

                // create tooltip
                var a = Ext.create('Ext.tip.ToolTip', {
                    dismissDelay: 5000000,
                    target: 'uniqueId',
                    html: '<div style="display:flex;word-break:break-all;">' + me.getValue() + '</div>',
                    width: 'auto',
                });
            }
        });
    }
}

Working Fiddle

希望这会帮助/指导您。

在文本字段上显示工具提示

2 个答案: