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

时间:2018-11-27 06:27:24

标签: extjs extjs3

我是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
    })

2 个答案:

答案 0 :(得分:1)

解决方案:

我将完全回答您的问题-如果您想添加工具提示,可以使用以下方法:

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测试。

配置fieldLabel仅在textfield由配置为使用FormLayout布局管理器的容器渲染时使用。

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

您可以看到此fiddle

答案 1 :(得分: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'
                    });
                }
            } 
        }