ExtJs 4.x 学习小记：Ext.PagingToolbar的使用

在使用Grid显示数据列表时，为了查看方便，经常用到的是分页显示，Ext中使用Ext.PagingToolbar来实现，这里只做基本应用介绍，Ext.PagingToolbar的详细配置项及属性可以查阅ExtJs 4.x的API文档http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.Paging，实现后具体界面如下

定义每页显示数量

var countPerPage = 5;

定义store（reader要包含在proxy里面，否则无法起作用）

 var store = Ext.create('Ext.data.Store', {
 		baseParams:{catalogid:0},
 		pageSize:countPerPage,
		fields: ["id","filecode","filename"],
		proxy: {
            type: 'ajax',
            url: '././FileListServlet',
            reader:{
        	type:'json',
        	root:'items',
        	totalProperty:'total'
        	}
        }          
    });

Grid定义

 var fileGridPanel = Ext.create('Ext.grid.Panel',{
 	id:'filegrid',
 	layout:'fit',
 	store:store,
 	loadMask:false,
 	autoExpandColumn:true,
 	columns:[
 		{text:'编号',dataIndex:'filecode',width:80},
 		{text:'文件名',dataIndex:'filename',flex:1},
 		{xtype:'actioncolumn',width:50,
 			items:[{
 			icon:'././image/del.png',
 			tooltip:'删除',
 			handler: function(grid, rowIndex, colIndex) {
                    
                    Ext.Msg.confirm("警告", "确定要删除吗？", function(button) {  
                            if (button == "yes") 
                            {  
                            	var rec = grid.getStore().getAt(rowIndex);  
                            	Ext.Ajax.request({
                            		url:'././DeleteRecordByID',
                            		params:{
                            			tablename:'filedata',
                            			id:rec.get('id')
                            		},
                            		method:'post',
                            		success:function(response,opts)
                            		{
                            			grid.getStore().remove(rec); 
                            		}
                            	})                                
                            }  
                        }); 
                }
 			},
 			{
 			icon:'././image/view.png',
 			tooltip:'预览'
 			}]
 		}
 		],
 	dockedItems:[{
 		xtype:'toolbar',
 		dock:'top',
 		items:[searchbar]
 	},{
 		xtype:'toolbar',
 		dock:'top', 		
 		items:[funcbar]}],
 	bbar:Ext.create('Ext.PagingToolbar',{
 		store:store,
 		displayInfo:true,
 		displayMsg:'显示{0}-{1}条，共{2}条',
 		emptyMsg:'无数据'
 	})
 });