ExtJS5：Checkbox afterSubTpl包装图标

Question

以下代码段不会在此网站上投放，但您可以访问正常工作的演示here on JSFiddle。

我试图让图标显示在复选框的右侧，但它似乎正在换行。是否有我需要设置的属性才能显示在线？这在ExtJS4中有效，但在我切换到ExtJS5后，这不起作用。

afterSubTpl文档

  

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;
}

Answer 1

我可能已经弄清楚了，但是这个解决方案使用魔术数字，这使得它在这种情况下起作用。

Demo

{
    xtype: 'checkbox',
    fieldLabel: 'Checkbox',
    afterSubTpl: tooltip,
    cls: 'no-wrap-tooltip'
}

.no-wrap-tooltip .x-form-cb-wrap-inner {
    display: inline-block;
    line-height: 28px;
}