Ext Grid 添加分页及工具条

来源：互联网发布：色温多少对眼睛好知乎编辑：程序博客网时间：2024/06/07 11:26

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