5

なぜこれが難しいのですか？私は CSS を使用できません。または、これで既に完了しています。コンテナ、画像、ラベルで構成される「ボタン」があり、コンテナのクリックイベントが正常に機能しました。ただし、ホバー時に背景色を変更するのと同じくらい簡単なことを行うと、ExtJが嫌いになり、これを行うより簡単な方法が必要になります。

これは私がこれまでに得たものです：

Ext.create('Ext.container.Container', {
                 layout: 'hbox',
                 style: { backgroundColor: '#ddd', margin: "5px 0px 5px 5px", padding: "3px", width: "150px", fontSize: "8pt" },
                 listeners: {
                    render: function (c) {
                       c.el.on('click', function () { alert('Downloading Report'); });

                       c.el.on('mouseover', function () {
                          //alert("mouseover");
                          Ext.apply(this, { style: { backgroundColor: '#aaa'} });
                       }
                       );

                       c.el.on('mouseout', function () {
                          //alert("mouseout");
                          Ext.apply(this, { style: { backgroundColor: '#ddd'} });
                       }
                       );
                    },
                    scope: this
                 },
                 items: [
                    { xtype: 'image', src: "resources/images/icons/monoDownload32.png", style: { margin: "2px", maxWidth: "32px"} },
                    {
                       xtype: 'label',
                       text: 'MS Excel Report',
                       style: { margin: "2px", fontSize: "8pt" }
                    }
                 ]
              })

アラートは呼び出されますが、スタイルは適用されていません。これほど単純なことを行うためのよりクリーンな方法はありますか? または、同じ結果を達成できるこの状況で使用するより良いコントロールがあります。

4

2 に答える 2

5

CSSが使えないのは残念です。可能であれば、次overClsの方法でアクセスできます：http: //docs.sencha.com/ext-js/4-1/# !/api/Ext.AbstractComponent-cfg-overCls

それを除けば、あなたのアプローチはかなり近いです。スタイルオブジェクトをelに適用しても、Extはあなたがそれを行ったことを知らないため、何もしません。代わりに、setStyleまたはapplyStyles

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-applyStyles

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-setStyle

于 2012-08-24T17:09:29.863 に答える
0

あなたが探している行動は

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.view.View

于 2013-11-14T05:48:17.207 に答える