如何将工具提示设置为输入类型为文件的 Ext.form.TextField？

Posted 2023-02-26

【中文标题】如何将工具提示设置为输入类型为文件的 Ext.form.TextField？

【英文标题】：How to set tooltip to Ext.form.TextField where input type is file?

【发布时间】：2018-11-27 06:27:23

【问题描述】：

我是 extjs 的新手，我想将工具提示设置为带有输入类型文件的 Ext.form.TextField 的字段标签。 我尝试通过遵循代码来做到这一点，但它不起作用。

    Ext.override(Ext.form.Field, 
        afterRender : Ext.form.Field.prototype.afterRender.createSequence(function()
            var qt = this.qtip;
            if (qt) 
                Ext.QuickTip.register (
            target:  this,
            title: '',
            text: qt,
            enabled: true,
            showDelay: 20
                )
            
        )
    );


   this.myTestComponent = new Ext.form.TextField(
       fieldLabel: 'My Field lable',
       qtip: 'My Field Tooltip',
       name: 'field1',
       scope: this,
       inputType: 'file',
       width: 150
    )

【问题讨论】：

究竟是什么不起作用？你在使用 ExtJS 3 吗？谢谢。

是的，我正在使用 ExtJs 3，qtip：“我的字段工具提示”不起作用。我想将工具提示设置为字段标签。但我的 TextField 的类型是文件，它不起作用

【参考方案1】：

试试这样：

        
            xtype:'textfield',
            name: 'field1',
            fieldLabel:'Label Descr',
            inputType: 'file',
            width: 250,
            listeners: 
                render : function(c) 
                    new Ext.ToolTip(
                        target : c.label.dom,
                        html: 'My tooltip'
                    );
                
             
        

【讨论】：

它给出错误 - TypeError: c.label is undefined target : c.label.dom,

如果我没记错的话，“文本字段”必须位于具有“表单”布局的面板内才能创建标签。

看看这个小提琴，看看有没有帮助：fiddle.sencha.com/#view/editor&fiddle/2o20

谢谢先生，但还是报同样的错误，TypeError: c.label is undefined target : c.label.dom,

奇怪，检查监听器是否声明在正确的地方，在textfield组件下，你可以放一个console.log(c)来查看textfield属性。

【参考方案2】：

解决方案：

我会准确回答你的问题 - 如果你想添加一个工具提示，你可以使用这个：

Ext.onReady(function() 
    Ext.QuickTips.init();

    var textFieldStreet = new Ext.form.TextField(
        fieldLabel: 'My Field lable',
        //renderTo: Ext.getBody(),
        name: 'field1',
        inputType: 'file',
        listeners: 
            render : function(c) 
                new Ext.ToolTip(
                    target : c.label.dom,
                    html: 'Label tooltip'
                );
                new Ext.ToolTip(
                    target : c.getEl(),
                    html: 'Field tooltip'
                );
            
         
    );

    var form = new Ext.form.FormPanel(
        renderTo: Ext.getBody(),
        items: [textFieldStreet]
    );

)

注意事项：

使用 ExtJS 3.4 测试。

Config fieldLabel 仅在 textfield 由已配置为使用 FormLayout 布局管理器的容器呈现时使用。

一个缺点是 Chrome 和 Mozilla 中默认的“未选择文件”工具提示。

你可以看到这个fiddle。

【讨论】：

谢谢您，先生，我使用了您的代码。但它仍然无法正常工作

@AmitaPatil 我已经用工作小提琴更新了答案。

添加了3次fieldLabel: 'fieldLabel'，隐藏brows button和fileName字段

您好先生，它可以工作，但它在浏览按钮上显示两个工具提示

@AmitaPatil 是的，此提示是 webkit 浏览器的一部分（有关更多信息和解决方法，请参阅答案中的链接）。在 IE 中这不是问题。但我认为，在字段标签上，工具提示在所有浏览器上都运行良好。