javascript - 在 Sencha Touch selectfield 中填充图标

Question

我有一个非常简单的问题，结果证明它的解决方案根本不是那么简单。
我想在 selectfield 的每个选项前添加图像 .更准确地说，我想将图像添加到 picker它会触发，也会触发选择字段的当前值。
为了简单起见，我将创建一个小示例:

假设您希望用户在方 block 、红心、黑桃和梅花这四种纸牌花色中选择一种。为了支持视觉识别，您需要在每个西装名称前加上相应的符号，因此它看起来像这样:

我的第一个 sencha touch 组件选择是 selectfield，它可以自然地从一组给定的选项中进行选择。 .不幸的是，它似乎只能显示纯文本，仅此而已。在深入研究 sencha touch 资源之后，我终于想出了一半的解决方案。基本上，我通过了 selectfield定制defaultPhonePickerConfig ，其中对应的picker (由 selectfield 用来显示选项)被分配一个自定义 itemTpl . itemTpl剩下的就是添加一些 html 来显示图像:

defaultPhonePickerConfig: {
    listeners: {
        initialize: function() {
            var slots = this.query('pickerslot');
            Ext.each(slots, function(slot) {
                slot.setItemTpl('<img src="someImage.jpg"> {text}');
            });

        },

        change: function() {
            // reconstruct the selectfield's change handler,
            // since it gets overwritten
            var iconSelect = Ext.Viewport.query('#IconSelect')[0];
            iconSelect.onPickerChange.apply(iconSelect, arguments);
        }
    }
}

可以找到此解决方案的工作 fiddle here .

我的解决方案还不错，但是有一个轻微的外观问题，这对我来说是不能接受的:图标只显示在 picker 中。 (上面屏幕截图的下半部分)，但不是 selectfield选择选项时本身(上部，灰色部分)。而且似乎也没有好的方法可以将图标添加到选择字段的当前值。

这就是我的问题的主要关注点:有什么好的方法可以将图标添加到 选择器的选项以及选择字段的当前值？我可能只需要向我现有的解决方案添加相对较少的代码，还是我应该采用另一种方法？
每一份贡献都会受到赞赏。谢谢!

更新:
经过一些hacking around，我找到了一种方法(一个丑陋的方法)来为 selectfield 添加一个图标。本身。它主要基于残酷的 HTML DOM 操作:我现在还为 selectfield 定义了事件处理程序。本身( change 和 painted )。在初始化和每次更改值时，我的处理程序都会在生成的 DOM 中搜索底层 <input>并把它弄得一团糟。 (那个坏男孩可能是我们不能首先分配 HTML 的原因，因为框架更改了它的 value 属性。而另一方面，value 只能包含纯文本。)
这就是我定义 selectfield 的方式的 listeners :

listeners: {
       change: function () {
           var pickerDOM = document.querySelector('#' + this.getId() + ' input[name="picker"]');
           PickerIcons.app.prependIconToSelectfield(arguments[1], pickerDOM);
       },
       painted: function () {
           // Initialize an icon on creation
           var pickerDOM = document.querySelector('#' + this.getId() + ' input[name="picker"]');
           PickerIcons.app.prependIconToSelectfield(this.getValue(), pickerDOM);
       }
}

对应函数prependIconToSelectfield()只是定义了一些 CSS:

prependIconToSelectfield: function (optValue, domElement) {
    var iconUrl = this.getIconUrl(optValue);
    domElement.style.backgroundImage = 'url(' + iconUrl + ')';
    domElement.style.backgroundSize = '20px 20px';
    domElement.style.backgroundRepeat = 'no-repeat';
    domElement.style.backgroundPosition = 'left center';
    domElement.style.paddingLeft = '30px';
}

查看 this fiddle一个工作的例子。

这对我来说仍然不是好的解决方案，因为按照我的口味，进行这种骇人听闻的 DOM 操作太流氓了。我不知道在更大的项目中主动乱搞 DOM 会产生什么副作用，并且不想以艰难的方式学习它。所以，我仍在寻找更清洁的解决方案。

Answer 1

当您尝试开箱即用时，工作如此辛苦的第一个荣誉是 sencha touch 非常难以操纵。话虽如此，让我尝试为您想要的解决方案提出解决方案。sencha 中的 selectfield 具有以下 DOM 标签结构。

div.x-field-select
    div.x-field-input
        input.x-input-el
        div.x-clear-icon
        div.x-field-mask

现在专注于 x-clear-icon，它通常是隐藏的，因为选择字段不需要清除按钮。首先为它写一个css类来显示它(显示: block )。这将使用类似于文本字段的 X 按钮显示它，并且它将位于右上角。您可以通过 css 将其定位在左侧，并在更改选择字段时可以将其背景更改为您想要的。这不是一个非常直接的解决方案，但我已经尝试过类似的问题并且它有效。从你上面所做的来看，我认为你可以做到。一切顺利。希望我的解决方案有所帮助。