3

Extjs4.1を使用しています

いくつかのテキストフィールドがあるフォームがあります。

フォームの表示中にユーザーが正しい値を入力できるように、このテキストフィールドの横にヘルプアイコンを表示したいと思います。

どんな体でもこれを解決するのを手伝ってくれますか？

4

5 に答える 5

11

最も簡単な方法は、次のようにafterLabelTextTplを使用して、ラベルテキストの最後に「ヘルプアイコン」を配置することです。

afterLabelTextTpl: '<img src="images/information.gif" class="info_image" data-qtip="your help text or even html comes here...."></img>'

任意のフィールドで使用できます...

于 2013-07-18T06:20:11.030 に答える
3

テキストフィールドの代わりにExt.form.TriggerFieldを使用してみてください。

参照用にExtjsドキュメントを参照してくださいhttp://extjs.cachefly.net/ext-3.4.0/docs/

ExtJs 4.1の場合：

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger

于 2012-08-30T18:10:53.063 に答える
2

afterLabelTextTpl設定を利用するプラグインを作成しました。このプラグインは、Ext.form.Labelableコンボボックスなどのあらゆる種類のフィールドにミックスインされています。

使い方はこちらです。

{
    xtype: 'textfield',
    fieldLabel: 'Some field label',
    name: 'name',
    plugins:[{
        ptype:'afterlabelinfo',
        qtip:'The text appearing after hovering over the icon'
    }]
}

必要なプラグインは次のとおりです。

Ext.define('Ext.ux.plugin.AfterLabelInfo', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.afterlabelinfo',

    init: function (cmp) {
        var me = this; // the plugin

        cmp.afterLabelTextTpl = [
            '<span',
            ' class="x-ux-plugin-afterlabelinfo"',
            ' data-qtip="',
            Ext.util.Format.htmlEncode(me.qtip || ''),
            '">',
            '</span>'
        ].join('');
    }
});

これがあなたが必要とするいくつかのCSSです。

.x-ux-plugin-afterlabelinfo {
    display: inline-block;
    margin-left: 5px;
    width: 12px;
    height: 12px;
    background-image: url(img/info-after.png) !important;
}

そしてアイコンここに画像の説明を入力してください（右クリックして名前を付けて保存）

結果

ここに画像の説明を入力してください

于 2017-03-11T09:35:33.733 に答える
0

私にとって最善のアプローチは、Ext.tip.QuickTipViewを使用することです。これは、次のようなアフターレンダリングイベントで簡単に追加できます。

afterrender: function(me) {
  // Register the new tip with an element's ID
  Ext.tip.QuickTipManager.register({
     target: me.getId(), // Target button's ID
     text  : 'My Button has a QuickTip' // Tip content  
  });
}

https://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.tip.QuickTip

于 2015-08-17T13:01:17.890 に答える
-2

コンボに画像を追加するには、

コンボのtplプロパティを使用します。

 Combo = Ext.create('Ext.form.field.ComboBox', {
    displayField : 'name',
    valueField   : 'code',
    grow         : true,
    store        : store,
    queryMode    : 'local',
    listConfig: {
        getInnerTpl: function() {
            // here you place the images in your combo
            var tpl = '<div>'+
                      '<img src="images/flags/{iso2}.png" align="left">&nbsp;&nbsp;'+
                      '{name}</div>';
            return tpl;
        }
    }
});
于 2012-08-31T09:22:12.643 に答える