在Sencha Touch selectfield中填充图标

Question

我有一个非常简单的问题,其解决方案结果并非如此简单.
我想在 a 的每个选项前面添加图像selectfield.为了更准确,我想将图像添加到pickerit触发器,还要添加到selectfield的当前值.
为了简单起见,我将创建一个小例子:

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

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

这个解决方案的工作小提琴可以在这里找到.

我的解决方案并不是那么糟糕,但是有一个轻微的cosmetical问题,这对我来说是不可接受的:图标只显示在picker(上面的屏幕截图的下半部分),而不是它selectfield自身(上部,灰色的部分)该选项已被选中.并且似乎没有好的方法来向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';
}

看看这个小提琴是否有一个实例.

这对我来说仍然不是一个好的解决方案,因为做这种hackish DOM操作对我来说太过流氓了.我不知道积极搞乱DOM的副作用可能是在更大的项目中,并且不想以艰难的方式学习它.所以,我仍然在寻找更清洁的解决方案.

Answer 1

首先值得称赞的是，当你尝试做一些开箱即用的事情时，煎茶触摸是非常难以操纵的。话虽如此，让我尝试并提出您想要的解决方案。sencha 中的选择字段具有以下 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类来显示它（display: block）。这将显示一个类似于文本字段的 X 按钮，并且它将位于右上角。您可以通过 css 将其定位到左侧，并且在更改选择字段时，您可以将其背景更改为您想要的。这不是一个非常直接的解决方案，但我已经尝试过解决类似的问题并且它有效。从你上面所做的来看，我认为你可以做到。一切顺利。希望我的解决方案有所帮助。