Extjs4.1を使用しています
いくつかのテキストフィールドがあるフォームがあります。
フォームの表示中にユーザーが正しい値を入力できるように、このテキストフィールドの横にヘルプアイコンを表示したいと思います。
どんな体でもこれを解決するのを手伝ってくれますか?
Extjs4.1を使用しています
いくつかのテキストフィールドがあるフォームがあります。
フォームの表示中にユーザーが正しい値を入力できるように、このテキストフィールドの横にヘルプアイコンを表示したいと思います。
どんな体でもこれを解決するのを手伝ってくれますか?
最も簡単な方法は、次のようにafterLabelTextTplを使用して、ラベルテキストの最後に「ヘルプアイコン」を配置することです。
afterLabelTextTpl: '<img src="images/information.gif" class="info_image" data-qtip="your help text or even html comes here...."></img>'
任意のフィールドで使用できます...
テキストフィールドの代わりに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
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;
}
結果
私にとって最善のアプローチは、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
コンボに画像を追加するには、
コンボの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"> '+
'{name}</div>';
return tpl;
}
}
});