3

やあ、

ボタンのさまざまな状態 (通常、ホバー、押された状態) の背景色を動的に変更する機能が必要です。

これまでに思いついたのは次のとおりです。 http://jsfiddle.net/suamikim/c3eHh/ 

Ext.onReady(function() {
    function updateBackground() {
        var theWin = win || this, // neccessary because of the call from the afterrender-event
            btn = theWin.down('#btnTest'),
            bckgr = theWin.down('#btnBckgr').getValue(),
            bckgrHover = theWin.down('#btnBckgrHover').getValue(),
            bckgrPressed = theWin.down('#btnBckgrPressed').getValue();

        // Set normal background as button-style
        // Should be ok
        $('#' + btn.id).css('background', bckgr);

        // Toggle background when hover-state changes
        // Are there any downsides if this function gets called everytime the updateBackground-method is called? Do i have to dispose anything before binding the functions again?
        $('#' + btn.id).hover(function() {
                $('#' + btn.id).css('background', bckgrHover);
            }, function() {
                $('#' + btn.id).css('background', bckgr);
            }
        );

        // Set the background for pressed button as document style
        // Problems:
        //     - Pollutes the document-header if called multiple times...
        //     - Background does not change anymore on hover for pressed button because of the !important, but without important it wouldn't show the pressed background at all...
        $('<style type="text/css"> #' + btn.id + '.x-btn-pressed { background: ' + bckgrPressed + ' !important } </style>').appendTo('head');
    };

    // Create a window with the propertygrid
    var win = Ext.create('Ext.window.Window', {
        width: 800,
        height: 200,
        layout: 'fit',

        tbar: {
            defaultType: 'textfield',
            defaults: {
                listeners: {
                    blur: updateBackground
                }
            },
            items: [
                'Background (CSS):', { itemId: 'btnBckgr', value: '#77ABD8' },
                'Background hover (CSS):', { itemId: 'btnBckgrHover', value: '#CC1C1C' },
                'Background pressed (CSS):', { itemId: 'btnBckgrPressed', value: '#7D4FC6' }
            ]
        },

        items: [{
            xtype: 'button',
            itemId: 'btnTest',
            text: 'test button',
            enableToggle: true
        }],

        listeners: {
            'afterrender': updateBackground
        }
    }).show();
});

これは基本的に機能しますが、私にはいくつかの質問が残っています:

1)

updateBackground メソッドが呼び出されるたびに jquery のホバー関数を呼び出しても問題ありませんか?

jquery-doc ( http://api.jquery.com/hover/ ) によると、この関数は、指定された 2 つの関数を、指定された要素の mouse-enter- および mouse-leave-events にバインドします。

これは、呼び出すたびに新しい関数をバインドするか、既にバインドされている関数を更新するか、新しい関数をバインドする前に既にバインドされている関数を自動的に破棄することを意味しますか?つまり、新しい関数をバインドする

前に何かを破棄する必要がありますか? $.hover で機能しますか?

2)

押された状態のスタイルを document-style として設定しました。つまり、updateBackground 関数が頻繁に呼び出されると (テキスト フィールドの 1 つがテスト ケースでぼかしイベントを発生させるたびに)、ドキュメント ヘッダーが汚染されます。

同じ目標を達成するためのより良い方法はありますか、または新しいスタイルを追加する前に既に設定されているスタイルを削除できますか?

3)

押されたスタイルの !important-flag により、ボタンが押された場合、ホバー状態の背景は表示されません。押された状態の背景が正しく表示されないため、このフラグを削除することはできません...解決策はありますか?

一般に、この問題をまったく異なる方法で解決する方法についてのあらゆる提案に対して、私はオープンです。

ありがとう、

マイク

編集：

上記のコードは単なる例です。実際には、ボタン以外の ext-controls (パネル、チェックボックスなど) の background-attribute を変更できる必要がありますが、ボタンの実用的なソリューションを自分で他のコントロールに採用できると思います。

これを念頭に置いて、ボタンで答えを指定しすぎないようにしてください。できるだけ一般的なものにする必要があります...

4

2 に答える 2

14

より具体的な CSS セレクターを使用すると、Ext のpressedCls および overCls 構成を利用できます。 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.button.Button-cfg-pressedCls http://docs.sencha.com/ext-js/4-1/ source/Button2.html#Ext-button-Button-cfg-overCls

.x-btn.my-over {
    background: blue;
}
/*Ext is not consistent */
.x-btn.x-btn-my-pressed {
    background: red;
}


new Ext.button.Button({
    overCls : 'my-over',
    pressedCls : 'my-pressed',
    //needs to be true to have the pressed cls show
    enableToggle : true,
    text : 'My button',
    renderTo : Ext.getBody(),
})

より動的で一般的なソリューションを編集する

    Ext.define('DynamicStyleState', {
    alias : 'plugin.dynamicStyleState',
    extend : Ext.AbstractPlugin,
    /**
     * @cfg
     */
    elementProperty : 'el',

    /**
     * @property
     */
    pressed : false,

    init : function(component) {
        this.component = component;
        this.component.on('afterrender', this._onAfterrender, this);
    },

    /**
     * @protected
     */
    clearStyle : function() {
        this.el.setStyle({
            background : ''
        });
    },
    /**
     * @protected
     * meant to be overriden
     */
    getHoverStyle : function() {
        return {
            background : 'blue'
        };
    },
    /**
     * @protected
     * meant to be overriden
     */
    getPressedStyle : function() {
        return {
            background : 'red'
        };
    },

    _onAfterrender : function() {
        this.el = this.component[this.elementProperty];
        this.el.hover(this._onElementMouseIn, this._onElementMouseOut, this);
        this.el.on('click', this._onElementClick, this);
    },

    _onElementMouseIn : function() {
        if(!this.pressed) {
            this.el.setStyle(this.getHoverStyle());
        }
    },

    _onElementMouseOut : function() {
        if(!this.pressed) {
            this.clearStyle();
        }
    },

    _onElementClick : function(e) {
        this.pressed = !this.pressed;
        if(this.pressed) {
            this.el.setStyle(this.getPressedStyle());
        } else {
            //mimic mouse in
            if(e.within(this.el)) {
                this.el.setStyle(this.getHoverStyle());
            }
        }
    }
});

ボタン以外でも機能するものが必要なため、これはどのコンポーネントでも機能するはずです。

使用例を次に示します。

    var headerHoverColor = new Ext.form.field.Text({
    fieldLabel : 'Header hover color',
    value : 'orange',
    renderTo : Ext.getBody()
});

var headerPressedColor = new Ext.form.field.Text({
    fieldLabel : 'Header pressed color',
    value : 'black',
    renderTo : Ext.getBody()
})

new Ext.panel.Panel({
    plugins : {
        ptype : 'dynamicStyleState',
        elementProperty : 'body'
    },
    header : {
        plugins : {
            ptype : 'dynamicStyleState',
            getHoverStyle : function() {
                return {
                    background : headerHoverColor.getValue()
                }
            },
            getPressedStyle : function() {
                return {
                    background : headerPressedColor.getValue()
                }
            }
        }
    },
    height : 300,
    width : 300,
    renderTo : Ext.getBody(),
    title : 'Panel'
});
于 2012-08-25T01:37:32.813 に答える
1

わかりました、上記のすべての問題をカバーするソリューションを見つけました：

pressedとhoveredスタイルの両方をヘッダーに直接追加します。

ヘッダーが汚染されないようにするために、jQuery新しい要素を追加する前に、ヘッダーからスタイル要素を動的に削除するだけです。

実施例

そして、背景を動的に変更するためのコード:

function updateBackground() {
    var theWin = win || this, // neccessary because of the call from the afterrender-event
    btn = theWin.down('#btnTest'),
    bckgr = theWin.down('#btnBckgr').getValue(),
    bckgrHover = theWin.down('#btnBckgrHover').getValue(),
    bckgrPressed = theWin.down('#btnBckgrPressed').getValue();

    // Set normal background as button-style
    // Should be ok
    $('#' + btn.id).css('background', bckgr);

    // Set the background for hovered and pressed button as document style
    // Remove style-element if it already exists to not pollute the document-head
    $('head style:contains("' + btn.id + ':hover")').detach();
    $('<style type="text/css"> #' + btn.id + ':hover { background: ' + bckgrHover + ' !important } </style>').appendTo('head');

    $('head style:contains("' + btn.id + '.x-btn-pressed")').detach();
    $('<style type="text/css"> .x-body #' + btn.id + '.x-btn-pressed { background: ' + bckgrPressed + ' !important } </style>').appendTo('head');
};

私にはうまくいくようですが、これに対する提案/改善はまだ受け付けています!

ありがとう。

于 2012-08-27T13:15:01.027 に答える