12

私は非常に単純な問題を抱えていますが、その解決策はそれほど単純ではないことがわかりました。の各オプションの前に画像
を追加したい。より正確に言うと、トリガーと選択フィールドの現在の値に画像を追加したいと思います。 簡単にするために、簡単な例を作成します。 selectfieldpicker

たとえば、ダイヤ、ハート、スペード、クラブの4つのトランプスーツから1つをユーザーに選択させたいとします。視覚的な認識をサポートするには、対応する記号を各スーツ名の前に追加して、次のようになります。
アイコン付きの選択フィールド

与えられたオプションのセットから自然に選択できるようにするsenchatouchコンポーネントの私の最初の選択はでしたselectfield。残念ながら、純粋なテキストしか表示できないようで、それ以上は表示できません。sencha touch sourceを掘り下げた後、私はついに半分の解決策を思いつきました。基本的に、私はカスタムを渡します。この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);
        }
    }
}

このソリューションの実用的なフィドルは、ここにあります。

私の解決策はそれほど悪くはありませんが、わずかな外観上の問題があり、それは私には受け入れられません：アイコンはpicker（上のスクリーンショットの下部）にのみ表示され、それ自体（上部、灰色の部分）には表示されませんselectfieldオプションが選択されました。また、selectfieldの現在の値にもアイコンを追加する良い方法はないようです。

そして、それが私の質問の主な関心事です。ピッカーのオプションとセレクフィールドの現在の値の両方にアイコンを追加するには、どのような良い方法がありますか？既存のソリューションに比較的少ないコードを追加するだけでよいのでしょうか、それともまったく別のアプローチを取る必要があるのでしょうか。
すべての貢献に感謝します。ありがとうございました！

更新：
いくつかのハッキングのselectfield後、私はそれ自体にアイコンを追加する方法（醜いもの）を見つけました。これは主に残忍なHTMLDOM操作に基づいています。selectfield自分自身（changeおよびpainted）のイベントハンドラーも定義するようになりました。初期化時および値が変更されるたびに、ハンドラーは生成されたDOMで基になるものを検索し、<input>それをいじります。value（フレームワークが属性を変更するため、そもそもHTMLを割り当てることができないのは、おそらくその悪い子です。value一方、プレーンテキストしか含めることができません。）これが、私が's
を定義する方法です。selectfieldlisteners

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 に注目してください。selectfield にはクリア ボタンが必要ないため、通常は非表示になっています。最初にそれを表示するための css クラスを作成します (display: block)。これにより、テキスト フィールドに似た X ボタンが表示され、右隅に配置されます。cssを介して左に配置し、選択フィールドを変更すると、背景を必要なものに変更できます。これは非常に簡単な解決策ではありませんが、同様の問題に対して試してみましたが、うまくいきます。上記のことから判断すると、あなたはそれを行うことができると思います。ではごきげんよう。私の解決策が役立つことを願っています。

于 2013-02-28T10:05:13.977 に答える