Extjs4.2.2 pagingtoolbar 的按鍵怎麼修改 ?

最近很不幸的又是臨危受命去改版別人的東西,這次是POS
POS的東西有一項很重要的特性就是所有的按鍵都要大
其中Grid的列要如何加大,加高,這請自己去查
今天要講的是pagingtoolbar的問題
pagingtoolbar的「重新整理」這按鈕要怎麼查出來?
先看「錯誤示範」 　
=============================================
 var grid = Ext.create('Ext.grid.Panel', {
   ...
   ...
   ...
  //這裡先不做dockedItems設定
  }
 var otherButton={.....} //定義一個要在pagingToolBar加入的其他功能按鈕
//在gird外面宣告一個paging Tool bar
        var pgToolbar = {
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true,
            height:40,
            items:[ otherButton ]
        }
 //放進 gird中
 grid.addDocked(pgToolbar);
 //這樣看起來看正常,是吧?
 //接著,我們要把「重新整理」按鍵隱藏起來,不讓user去按
pgToolbar.down('#refresh').hide(); <--注意,這裡就會出現pgToolbar error:沒有「.down」方法函數
                                                            //這下子,志明跟春嬌的故事就演不下去了!!
================================================
要怎麼做才是正確的呢?
以下才是正確的方法:
=============================================
 var grid = Ext.create('Ext.grid.Panel', {
   ...
   ...
   ...,
            width: 735,
            minHeight: 300,
           //這時就要先放進grid中了
            dockedItems: [{
                xtype: 'pagingtoolbar',
                store: store,
                displayInfo: true,
                dock: 'bottom',
                height:40,
                items: [
                     //在paging tool bar加上其他我們要用的動作鈕
                    {
                        xtype: 'button',
                        margin: '0 0 0 30',
                        text: '關閉',
                        handler: function () {
                            .....
                        }
                    }
                ]
            }]
  }
  //宣告完了,現在,就可以找出「重新整理 」按鍵做隱藏動作了
  grid.down('#refresh').hide(); <---這樣,就達成我們要的目的了
======================================================
其他的修改icon的動作也是如此,舉例吧
===================================
        var btnNext = grid.down('#next');
        btnNext.minWidth = 32;
        btnNext.minHeight = 32;
        btnNext.setText('');
        btnNext.setIcon('');
        btnNext.iconCls = null;
        btnNext.cls = 'pagingToolBarBtnNext';
================================
(上例是你已定義一個css  pagingToolBarBtnNext class,像是以下的玩意
           .pagingToolBarBtnNext {
                background-image: url('......../ToNext.png') !important;
            }
)

以上,大家加油吧