Ext Grid 添加分页及工具条

var store=new Ext.data.Store({
            pageSize: itemsPerPage,

  });

var panel = new Ext.grid.GridPanel({

               loadMask:true,
               autoScroll : true,
               id:'panel',
               store : store,
               stripeRows : true,
               columns : [
                       {header:'Field Name',dataIndex:'store_field', flex: 2,  renderer: yourrenderTitle},

                       ...

                       . ..

                      ],
               style : "border:none",

               height : 400,

//工具条

                 tbar: new Ext.Toolbar({
                     height : '32' , autoWidth:true, autoShow:true,  
                    items:[
                        { text: 'User Name'},  
                        { xtype: 'textfield', name: 'searchUserNameObj', id: 'searchUserNameId' ,  hideLabel: true, width: 200, height : '28',
                            listeners: {
                                    change: {
                                         fn: function() {  searchNameValue= Ext.getCmp("searchUserNameId").getValue(); },
                                         scope: this,
                                         buffer: 100
                                     }  
                                }
                        },
                        { xtype: 'button', text: 'Search',tooltip: 'Search Rows',
                            handler:  function (){
                                allUserOutboxStore.load();
                            }
                        }
                    ]  

                 }) ,

               viewConfig : { forceFit : true, scrollOffset : 0 },

                dockedItems: [{

                   xtype: 'pagingtoolbar',
                    store: allUserOutboxStore,   
                    dock: 'bottom',
                    displayInfo: true

                }],

                listeners:{
                    itemclick: function(view ,record, htmlElement, rowNumber, eventObj ,  eOpts){
                        console.info( record.data["xxx"] );
                    }
                }
        });
        
        store.load({
            params : {
                start:0 ,
                limit: itemsPerPage
            }
        });
        store.on('beforeload',function(){
             Ext.apply(  store.proxy.extraParams, {  searchUserName : Ext.getCmp("searchUserNameId").getValue()  });    
        });
        return panel;
    }