title: How do I add a button to the bottom bar in extjs?
body: <p>I try to add a text filed and a button to the grid panel in extjs with following code:</p>
  
  <pre><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'
          });
  </code></pre>
  
  <p>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?</p>