11

Extjs 4.1.1atip textで、スライダーを常に表示しておく方法は?

現在、tip textユーザーがスライダーのバーをドラッグするたびに が表示されます。ドキュメント
を検索しましたが、関連する概念が見つかりませんでした。

文書化されていないか不可能な場合はtip text、手動で作成する方法を説明してください。はtip textスライダーのバーに沿って移動する必要があり、他の隣接するコンポーネントを覆ったり隠したりしてはなりません。

簡単なスライダーを生成する私のコードは次のとおりです。

xtype:'slider',
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 6,
minValue: 1,
maxValue: 12,
useTips: true,

tipText: function(thumb){
    var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var value = Ext.String.format(months[thumb.value]);
    return value;
},

質問 2:tip textスライダーにホバーしたときに を表示することは少なくとも可能ですか?

PS:こちらでも同じ質問をしました。

編集 1:< 2 つの隣接するボタン (と) を使用して、スライダーのシーク バーも移動しています>。そのため、隣接するボタンでシーク バーを移動すると、シーク バーも移動する必要があることに注意する必要がありますtip text。

編集 2:スライダーまたは隣接するボタンにカーソルを合わせると、ヒントのテキストが表示されるはずです。

回答: http://jsfiddle.net/WdjZn/1/

4

2 に答える 2

9

でいくつかのイベント ハンドラーをオーバーライドすることで、ヒントを表示し続けることができましたExt.slider.Tip。

Ext.define('AlwaysVisibleTip', {
    extend: 'Ext.slider.Tip',

    init: function(slider) {
        var me = this;
        me.callParent(arguments);
        slider.removeListener('dragend', me.hide);
        slider.on({
            scope: me,
            change: me.onSlide,
            afterrender: function() {
                setTimeout(function() {
                    me.onSlide(slider, null, slider.thumbs[0]);
                }, 100);
            }
        });
    }
});

Ext.create('Ext.slider.Single', {
    animate: false,
    plugins: [Ext.create('AlwaysVisibleTip')],
    // ...
});

デモをご覧ください。

私のアプローチの欠点:

  1. プライベートメソッドに依存していますonSlide
  2. シングルスライダーのみ適用
  3. animateが に設定されている場合にのみ、キーボード ナビゲーションが正しく機能します。false
  4. setTimeout先端の初期位置を調整するために使用されます

この欠点を修正するには、Ext.slider.TipクラスだけでなくExt.slider.Multyクラス、そしておそらくExt.slider.Thumbクラスをハッキングする必要があります。

編集

が呼び出されたときに発生しないためchangecomplete、イベントをchangeイベントに置き換えました。changecompleteslider.setValue()

ボタンが隣接するスライダーのデモを追加しました。

編集2

tipTextカスタム ヒント プラグインが使用されている場合、config は適用されなくなりました。プラグインのgetText 構成を使用する必要があります。

Ext.create('Ext.slider.Single', {
    animate: false,
    plugins: [Ext.create('AlwaysVisibleTip',{
        getText: function(thumb) {
            var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            return Ext.String.format(months[thumb.value]);
        }
    })],
    // ...
});

デモを更新しました。

于 2013-03-06T13:45:30.857 に答える
2

extjs 4.2 の場合、 : を :に
変更します。
slider.removeListener('dragend', me.hide);

slider.removeListener('dragend', me.hide, me);

于 2013-10-21T19:28:00.480 に答える