在Sencha Touch selectfield中填充图标

Question

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

比方说，您希望用户在四种扑克牌套装中选择一种钻石，心形，黑桃和俱乐部。为了支持视觉识别，您需要在每个套装名称前面添加相应的符号，因此它看起来像这样：

我首选的一个sencha触控组件，可以自然地选择一组给定的选项selectfield。不幸的是，它似乎只能显示纯文本，仅此而已。在深入了解sencha触摸源之后，我终于提出了半个解决方案。基本上，我传递了selectfield自定义defaultPhonePickerConfig，其中相应的picker（由selectfield用来显示选项）被分配了一个自定义{{1} }}。 itemTpl完成剩下的工作，即添加一些html来显示图像：

itemTpl

可以找到此解决方案的工作小提琴 here。

我的解决方案并不是那么糟糕，但是有一个轻微的化妆问题，这对我来说是不可接受的：图标只显示在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); } } } （上面屏幕截图的下半部分），但选择该选项时，不 picker本身（上部，灰色部分）。并且似乎没有好的方法来向selectfield的当前值添加图标。

这是我的问题的主要关注点：有什么好的方法可以为两者选择器的选项以及selecfield的当前值添加一个图标？我可能只需要在我现有的解决方案中添加相对较少的代码，还是应该采用一种完整的方法？ 每个贡献都表示赞赏。谢谢！

更新
在一些黑客攻击之后，我找到了一种方法（一种丑陋的方式）将一个图标添加到selectfield本身。它主要基于残酷的HTML DOM操作：我现在还为selectfield本身（selectfield和change）定义事件处理程序。在初始化时，每次更改值时，我的处理程序都会在生成的DOM中搜索基础painted并查看它。 （那个坏孩子可能是我们无法首先分配HTML的原因，因为框架会更改其<input>属性。另一方面，value只能包含纯文本。）<登记/> 这就是我定义value的{​​{1}}：

的方法

selectfield

相应的函数listeners只定义了一些CSS：

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

查看this fiddle的工作示例。

这对我来说仍然不是一个好的解决方案，因为根据我的口味做这种hackish DOM操作太过于 rogue 。我不知道积极搞乱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，它通常是隐藏的，因为selectfield不需要清除按钮。首先为它编写一个css类来显示它（display：block）。这将使用类似于文本字段＆amp;的X按钮显示它。它将位于右角。你可以通过css将它放在左边，在更改选择字段时，你可以将它的背景更改为你想要的。这不是一个非常直接的解决方案，但我已经尝试过类似的问题＆amp;有用。从你上面所做的事情来看，我认为你可以做到。祝一切顺利。 希望我的解决方案有所帮助。