How do I add a button to the bottom bar in extjs?

Question

I try to add a text filed and a button to the grid panel in extjs with following code:

        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'
        });

But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?

http://stackoverflow.com/questions/8477879/extjs-button-style-toolbar — MMT, May 03 '12 at 08:32

score 0 · Answer 1 · edited May 23 '17 at 12:27

the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.

What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.

Also see following example:
Button click event Ext JS }

score 0 · Accepted Answer · answered May 08 '12 at 10:19

0

I usually just add an icon to the button which helps it stand out. so just set a value for iconCls: 'mybuttonicon'

and in your css .mybuttonicon { background-image: url(../path/to/icon) !important;}

answered May 08 '12 at 10:19

gunnx

1,229
7
16

How do I add a button to the bottom bar in extjs?

2 Answers2