12

我有一个非常简单的问题，其解决方案根本不是那么简单。
我想在a的每个选项前面添加图像selectfield。更准确地说，我想将图像添加到picker它的触发器，以及选择字段的当前值。
为了简单起见，我将创建一个小示例：

假设您希望用户在Diamonds、Hearts、Spades 和 Clubs四种扑克牌花色中选择一种。为了支持视觉识别，您希望在每个西装名称前面加上相应的符号，所以它可能看起来像这样：
带有图标的选择域

我第一个选择 sencha touch 组件，它可以从一组给定的选项中进行选择，自然是selectfield. 不幸的是，它似乎只能显示纯文本，仅此而已。在深入挖掘了 sencha touch 资源后，我终于想出了半个解决方案。基本上，我传递了selectfield一个 custom defaultPhonePickerConfig，其中对应的picker（用于selectfield显示选项的）被分配了一个 custom 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);
        }
    }
}

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

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

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

更新：
经过一番折腾，我找到了一种方法（一种丑陋的方法）在selectfield自身前面加上一个图标。它主要基于残酷的 HTML DOM 操作：我现在还为selectfield自身定义事件处理程序（change和painted）。在初始化和每次更改值时，我的处理程序都会在生成的 DOM 中搜索底层<input>并对其进行处理。（那个坏男孩可能是我们一开始不能分配 HTML 的原因，因为框架改变了它的value属性。value另一方面，它只能包含纯文本。）
这就是我定义selectfield's 的方式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';
}

查看此小提琴以获取工作示例。

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

4

1 回答 1

3

当你尝试做一些开箱即用的事情时，首先要赞叹煎茶触摸是非常难以操作的。话虽如此，让我尝试并提出您想要的解决方案。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 将其定位到左侧，并在更改选择字段时将其背景更改为您想要的。这不是一个非常直接的解决方案，但我已经尝试过类似的问题并且它有效。从你上面所做的来看，我认为你可以做到。一切顺利。希望我的解决方案有所帮助。

于 2013-02-28T10:05:13.977 回答