我有一个非常简单的问题，其解决方案根本不是那么简单。
我想在selectfield的每个选项前面添加图像。为了更准确，我想将图像添加到它触发的picker以及selectfield的当前值中。
为了简单起见，我将创建一个小示例:
假设您要用户在四种 flutter 克牌套装钻石，红心，黑桃和球杆中选择一种。为了支持视觉识别，您希望在每个西装名称之前添加对应的符号，因此它看起来像这样:
我首先选择的sencha touch组件是selectfield，它可以自然地从给定的一组选项中进行选择。不幸的是，它似乎只能显示纯文本，仅此而已。在深入探讨sencha触摸源之后，我终于提出了半个解决方案。基本上，我为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中找到该解决方案的有效小提琴。
我的解决方案还不错，但是有一个轻微的外观问题，这对我来说是 Not Acceptable :图标仅显示在picker中(上面屏幕截图的下部)，但是而不是 selectfield本身(上部，呈灰色部分)。而且似乎也没有将图标添加到选择字段的当前值的好方法。
这就是我的主要问题:有什么好方法可以在，选择器的以及selecfield的当前值中添加图标到？是否只需要在现有解决方案中添加相对较少的代码，还是应该采用一种整体的方法？
每一个贡献都值得赞赏。谢谢!
更新:
经过一番黑客攻击后，我找到了一种方法(丑陋的方法)在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中乱搞的副作用是什么，并且不想学习困难的方法。因此，我仍在寻找更清洁的解决方案。
最佳答案
当您尝试开箱即用时，首先要努力工作的煎蛋感觉非常难。话虽如此，让我尝试为您想要的解决方案提出建议。
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类以显示它(显示:块)。这将使用类似于文本字段的X按钮显示它，并且它会位于右上角。您可以通过CSS将其定位在左侧，并在更改选择字段时将其背景更改为所需的背景。这不是一个非常简单的解决方案，但是我已经尝试过解决类似的问题，并且可以正常工作。从您上面所做的事情来看，我认为您可以做到。祝一切顺利。
希望我的解决方案有帮助。