在 Sencha Touch 选择字段中填充图标

Question

我有一个非常简单的问题，但结果证明它的解决方案一点也不简单。
我想在selectfield 的每个选项前添加图片。更准确地说，我想将图像添加到它触发的picker，以及选择字段的当前值。
为了简单起见，我将创建一个小例子：

假设您希望用户在四种扑克牌花色中选择一种钻石、红心、黑桃和梅花。为了支持视觉识别，您需要在每个西装名称前面加上相应的符号，所以它可能看起来像这样：

我第一个选择 sencha 触摸组件，它可以从一组给定的选项中进行选择，自然是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);
        }
    }
}

可以在 here 找到适用于该解决方案的 fiddle。

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

这是我的问题的主要关注点：有什么好的方法可以将图标添加到 选择器的选项以及选择字段的当前值？我可能只需要在现有解决方案中添加相对较少的代码，还是应该采取完全不同的方法？
每一份贡献都值得赞赏。谢谢！

更新：
在进行了一些修改之后，我找到了一种方法（一种丑陋的方法）在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 中的 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类来显示它（显示：块）。这将使用类似于文本字段的 X 按钮显示它，并且它将定位在右上角。您可以通过 css 将其定位到左侧，并在更改选择字段时将其背景更改为您想要的。这不是一个非常直接的解决方案，但我已经尝试过类似的问题并且它有效。从你上面所做的来看，我认为你可以做到。一切顺利。 希望我的解决方案有所帮助。