以下代码段不会在此网站上投放,但您可以访问正常工作的演示here on JSFiddle。
我试图让图标显示在复选框的右侧,但它似乎正在换行。是否有我需要设置的属性才能显示在线?这在ExtJS4中有效,但在我切换到ExtJS5后,这不起作用。
Ext.form.field.Checkbox
->config
->afterSubTpl
在subTpl标记之后插入字段标记的可选字符串或XTemplate配置。如果使用XTemplate,则组件的渲染数据将用作上下文。
Ext.require(['*']);
Ext.define('App.view.MainView', {
extend: 'Ext.panel.Panel',
xtype: 'mainView',
alias: 'widget.mainview',
title: 'Checkbox Template Example',
referenceHolder: true,
layout: {
type: 'border'
},
initComponent: function () {
var me = this,
tooltip = me.getHelpIconWithTooltip();
me.items = [{
region: 'center',
xtype: 'panel',
title : 'A Panel Title',
margin : 20,
bodyStyle: 'padding: 8px;',
layout : 'vbox',
items : [{
xtype: 'checkbox',
fieldLabel : 'Checkbox',
afterSubTpl: tooltip
}]
}],
me.callParent();
},
getHelpIconWithTooltip: function () {
return this.getFormIconWithTooltip('help-icon help-form-icon',
'This is a help tooltip...');
},
getFormIconWithTooltip: function (iconClassList, toolTipText) {
var getSpan = function(cl, qt) {
return '<span class="'+cl+'" data-qtip="'+qt+'"></span>';
}
return [
'<tpl>',
getSpan(iconClassList, toolTipText),
'</tpl>'
];
}
});
Ext.define('App.app.App', {
extend: 'Ext.app.Application',
name: 'App',
launch: function () {
Ext.create('Ext.Viewport', {
layout: 'fit',
flex: 1,
items: [{
xtype: 'mainview'
}]
});
}
});
Ext.onReady(function () {
Ext.application('App.app.App');
});
.help-icon {
display: inline-block;
background: url(http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png) -705px -1125px no-repeat;
width: 16px;
height: 16px;
}
.help-form-icon {
/*margin-left: 5px;*/
}
<link href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css" rel="stylesheet" />
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
如果我在复选框中添加一个类,我可以阻止它包装,但现在图标位置太高了。
{
xtype: 'checkbox',
fieldLabel: 'Checkbox',
afterSubTpl: tooltip,
cls: 'no-wrap-tooltip'
}
.no-wrap-tooltip .x-form-cb-wrap-inner {
display: inline-block;
}
答案 0 :(得分:0)
我可能已经弄清楚了,但是这个解决方案使用魔术数字,这使得它在这种情况下起作用。
{
xtype: 'checkbox',
fieldLabel: 'Checkbox',
afterSubTpl: tooltip,
cls: 'no-wrap-tooltip'
}
.no-wrap-tooltip .x-form-cb-wrap-inner {
display: inline-block;
line-height: 28px;
}