EXTJS3 Ext.PagingToolbar() 快捷键应用

/**
 * 键盘控制翻页
 * @example 控制键 按 "左" 或 "Page Up" 翻至 上一页 
 * @example 控制键 按 "右" 或 "Page Down" 翻至 下一页 
 * @example 控制键 按 "Home"  翻至 首页
 * @example 控制键 按 "End"  翻至 尾页 
 * 
 * @example !注
 *	<p>1.在当前 store 增加 load 事件
 *  	<p>例：
 * 	<p>store.on('load',function(){
 *	<p>	if(store.getCount()>0){
 *	<p>		grid.getSelectionModel().selectFirstRow();//首行被选
 *	<p>		grid.getView().focusRow(0);//焦点定位
 *	<p>	}
 *	<p>});
 *	<p>2.在当前 grid 增加 keydown 事件
 *  	<p>例：
 * 	<p>grid.on('keydown',function(e){
 *	<p>		e.stopEvent();
 *	<p>		var thisPagingToolbar = Ext.getCmp('PagingToolbar的ID');
 *	<p>	    PagingToolbar_KeyEvent(thisPagingToolbar,e);
 *	<p>});
 * @param {} thisPagingToolbar
 * @param {} e
 */
function PagingToolbar_KeyEvent(thisPagingToolbar,e){
    if((e.getKey()==Ext.EventObject.LEFT) || (e.getKey()==Ext.EventObject.PAGE_UP) ){ 
    	if(thisPagingToolbar.readPage()!=1)
    		thisPagingToolbar.movePrevious();
    }
    if((e.getKey()==Ext.EventObject.RIGHT) || (e.getKey()==Ext.EventObject.PAGE_DOWN)){
    	if(thisPagingToolbar.readPage()!=thisPagingToolbar.getPageData().pages)
		thisPagingToolbar.moveNext();
	}
	if(e.getKey()==Ext.EventObject.HOME){ 
    	if(thisPagingToolbar.readPage()!=1)
    		thisPagingToolbar.moveFirst();
    }
    if(e.getKey()==Ext.EventObject.END){
    	if(thisPagingToolbar.readPage()!=thisPagingToolbar.getPageData().pages)
		thisPagingToolbar.moveLast();
	}
}

//运行实例
var customerTypesDataStore = new Ext.data.Store({
	proxy:new Ext.data.HttpProxy({
		url:'./customerType/list.tc'
	}),
	reader:new Ext.data.JsonReader(
		{root:"Records",totalProperty:"RecordCount"},
		[
			{name : 'CustomerTypeCode',type : 'int'}, 
			{name : 'CustomerTypeName',type : 'string'},
			{name : 'ReCounts',type : 'int'}
		]
	)
});
customerTypesDataStore.on('beforeload', function() {
	customerTypesDataStore.removeAll();
	this.baseParams = {
		searchText:customerTypesGridPanel.SearchField.getValue()
	};
});
customerTypesDataStore.on('load',function(){
	if(customerTypesDataStore.getCount()>0){
		customerTypesGridPanel.getSelectionModel().selectFirstRow();
		customerTypesGridPanel.getView().focusRow(0);
	}
});
var customerTypes_grid = Ext.grid;
var customerTypes_grid_PageSize = 20;
function customerTypesDataStore_load(){
	customerTypesDataStore.load({params:{start:0,limit:customerTypes_grid_PageSize}});
}
var customerTypesGridPanel = new customerTypes_grid.GridPanel({
	store:customerTypesDataStore,//数据源定义
	loadMask : {
	   msg : '数据加载中...'
	},	
	cm: new customerTypes_grid.ColumnModel([
	    new customerTypes_grid.RowNumberer(),
		{header:'问题类型编码', dataIndex:'CustomerTypeCode',width:80},
    	{header:'问题类型名称', dataIndex:'CustomerTypeName'},
    	{header:'统计次数', dataIndex:'ReCounts'}
	]),
	viewConfig: {
	    forceFit:true
	},
	columnLines: true,
	region:'center',
	iconCls:'icon-grid',
	tbar: [				
		new Ext.form.TextField({
			ref:'../SearchField',
			emptyText:'请输入 问题类型编码 / 问题类型名称',
			width:500
			,selectOnFocus:true
			,enableKeyEvents:true
			,listeners:{
            	specialkey:function(field,e){    
	            	if (e.getKey()==Ext.EventObject.ENTER){
	            		e.stopEvent();
	            		customerTypesDataStore_load();
	            	}
	            }
	        }
		}),{
			text:'查找',
	   		tooltip:'查找',
	   		iconCls:'search',
	   		handler:function(){
				customerTypesDataStore_load();
	   		}			
		}
	],
	bbar: new Ext.PagingToolbar({
		id:'customerTypesGridPanel_paging',//设置分页组件ID
        pageSize: customerTypes_grid_PageSize,
        store: customerTypesDataStore,
        displayInfo: true,
        displayMsg: '当前 第{0}-{1} 条 / 共 {2} 条',
        emptyMsg: "没有数据"
    }),
    sm: new customerTypes_grid.RowSelectionModel({
    	singleSelect:true,
	}),
    listeners:{
		'keydown':function(e){
			e.stopEvent();
            PagingToolbar_KeyEvent(Ext.getCmp('customerTypesGridPanel_paging'),e);
			//通过ID获取 要控制的组件
		}
	}
});