1

次のコードを使用して、extjs のグリッド パネルにテキスト フィールドとボタンを追加しようとしています。

        var shopIdInput = new Ext.form.TextField({
            emptyText: "请输入商户Id",
            width: 200
        });

        var deleteOneShopCacheBtn = new Ext.Button({
            text : '删除商户缓存',
            handler: deleteOneShopCache,
            minWidth : 100,
            cls: "delBtn"
        });
                 ......
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: columns,
            bbar: [shopIdInput, deleteOneShopCacheBtn],
            buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
            items: [commandForm],
            buttonAlign: 'center',
            stripeRows: true,
            autoExpandColumn: 'serverUrl',
            //title: '批量执行指令',
            sm: checkboxSelect,
            frame: true,
            autoHeight: true,
            enableColumnHide: false,
            renderTo : 'serverInfoList'
        });

しかし、bbar のボタン deleteOneShopCacheBtn は、ボタンのボタン clearRedressWordCacheBtn のような一般的なボタンのようには見えません。マウスを置くとボタンに変わります。プロパティ cls を設定して問題を解決しようとしましたが、失敗しました。どうすればよいですか?

4

2 に答える 2

0

私は通常、ボタンを目立たせるアイコンをボタンに追加するだけです。iconCls: 'mybuttonicon' の値を設定するだけです。

そしてあなたのcss .mybuttonicon { background-image: url(../path/to/icon) !important;}

于 2012-05-08T10:19:25.347 に答える
0

cls config を使用すると、レンダリング可能なオブジェクト (この場合はボタン) に適用する追加のクラスを指定できますが、マウスがその上にあることに基づいて変更することはできません。

必要なのは、deleteOneShopCacheBtn のリスナーで、mouseover イベントをリッスンすることです (ボタンが応答するイベントのリストについては、Sencha のドキュメントも参照してください)。関数を起動して、ボタンを好きなように見せることができます。私は現在仕事をしています。今夜家に帰ってもまだこの質問がある場合は、コードを投稿できます。

次の例も参照してください:
ボタン クリック イベント Ext JS }

于 2012-05-04T18:55:13.953 に答える