组中每个单选按钮和标签上工具提示,ExtJS

xdyibdwo  于 2022-12-12  发布在  其他
关注(0)|答案(3)|浏览(169)

在extjs 2.3上工作,当用户将鼠标悬停在单选按钮或标签上时,尝试在单选组上显示工具提示

Ext.QuickTips.init();
var radios = new Ext.form.RadioGroup({
        id: 'someId',
        fieldLabel: 'Period',
        columns: 2,
        items: [
            { id: 'am_box', boxLabel: 'AM', name: 'period', inputValue: 'am', tooltip: 'some am message', checked: true },
            { id: 'pm box', boxLabel: 'PM', name: 'period', inputValue: 'pm', tooltip: 'some pm message' }
        ]
    });

我在文档中看不到任何关于工具提示和单选按钮的内容,有人能给我指出正确的方向吗

zz2j4svz

zz2j4svz1#

对于几乎每个标记字段组件,ExtJS都提供了一个可选的Template配置来插入字段标记。
根据文档,在此特定情况下,您可以将以下内容添加到代码中:
boxLabelAttrTpl: 'data-qtip="my radio item tip"',

pb3skfrl

pb3skfrl2#

如果您希望在实际单选按钮上显示工具提示,则可以使用inputAttrTpl config。

{
  xtype: 'radio',
  inputAttrTpl: 'data-qtip="Your tooltip",
}

如果不使用Ext.app.Application

Ext.tip.QuickTipManager.init();
dzhpxtsq

dzhpxtsq3#

我接受了@isherwood的建议,研究了标题属性,并提出了以下解决方案。

Ext.QuickTips.init();
var radios = new Ext.form.RadioGroup({
    id: 'someId',
    fieldLabel: 'Period',
    columns: 2,
    items: [
        { id: 'am_box', boxLabel: 'AM', listeners: me.setRadioQtip('some am message'), name: 'period', inputValue: 'am', checked: true },
        { id: 'pm box', boxLabel: 'PM', listeners: me.setRadioQtip('some am message'), name: 'period', inputValue: 'pm' }
    ]
});

setRadioQtip: function ( t )
{
    var o = {
        render: function()
        {
            var id  = Ext.get(Ext.DomQuery.select('#x-form-el-'+this.id+' div'));
            Ext.QuickTips.register(
            {   
                target:  id.elements[id.elements.length - 1].id, 
                text: t,
                dismissDelay: 5000
            });
        },
        destroy: function()
        {
            var id = Ext.get(Ext.DomQuery.select('#x-form-el-'+this.id+' div'));
            Ext.QuickTips.unregister(id.elements[id.elements.length-1].id);
        }        
    }
    return o;
}

工具提示现在出现在单选按钮和标签的周围,但是有点命中和错过,这取决于你悬停的位置,id指向class=“x-form-radio-wrap-inner“,它包含按钮和标签,我能够从那里获得实际的按钮和标签id,并将快速提示指向这些,所以它完全按照我想要的方式工作。
希望这对以后的其他人有帮助!

相关问题