Question

我尝试使用以下代码将文本字段和按钮添加到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来解决问题并失败，那么我该怎么办？

Answer 1

cls config允许您指定要应用于可渲染对象的其他类（在您的情况下为按钮），但不会根据鼠标悬停在其上进行更改等任何操作。

你需要的是deleteOneShopCacheBtn上的一个监听器并监听mouseover事件（也可以参阅Sencha docs获取按钮响应的事件列表）。你可以启动一个功能，使你的按钮看起来像任何你想要的。我现在在工作。如果你今晚回家时还有这个问题我可以发一些代码。

另见下列例子：
Button click event Ext JS }

Answer 2

我通常只是在按钮上添加一个图标，以帮助它脱颖而出。所以只需设置一个值 iconCls：'mybuttonicon'

并在你的CSS中 .mybuttonicon {background-image：url（../ path / to / icon）！important;}

如何在extjs的底栏中添加一个按钮？

2 个答案: