ExtJs 4.x 学习小记：Ext.TabPanel滚动条及分页栏不在页面最底端的处理

场景：

动态增加Ext.TabPanel页签，页签的url指向一个jsp文件，该jsp文件中引用js文件创建GridPanel及分页栏，jsp文件中还包含一个div元素，作为Grid的父容器。

运行后，发现两个问题

1、表格尺寸超过页面大小时，不显示滚动条

2、分页栏始终紧随Grid，而不在页面最下方

处理方法：

首先让jsp文件中的div元素充满body

<div id="griddiv" style='height:100%'></div>	

动态增加Ext.TabPanel时，设置autoScroll，让它出现滚动条，不要设置layout:'fit'，否则autoScroll无效

 /**
  * 添加页签
  * @param {} parentPanel
  * @param {} title
  */
 function addTabToPanel(parentPanel,title,key,url){
 	var tab = Ext.getCmp(key);
 	if (!Ext.isEmpty(tab))
 	{
 		parentPanel.setActiveTab(tab);
 	}
 	else
 	{
 		tab = parentPanel.add({
 			id:key,
 			title:title,
 			closable:true,
 			autoScroll:true,//滚动条
 			autoLoad:{
 				url:url,
 				scripts:true
 			}
 		})
 		parentPanel.setActiveTab(tab);
 	} 	
 }

js文件中创建panel，Grid嵌入到一个Panel中，Panel的height配置为 100%，充满整个div

 var taskGridPanel = Ext.create('Ext.grid.Panel',{
 	id:'monthRepairGrid', 	
 	layout:'fit', 
 	store:store,
 	autoExpandColumn:true,
 	columns:columns,
 	tbar:funcbar,
 	bbar:Ext.create('Ext.PagingToolbar',{
	 		store:store,
 		displayInfo:true,
 		displayMsg:'显示{0}-{1}条，共{2}条',
 		emptyMsg:'无数据'
	})
});

 Ext.onReady(function (){
	 var pnMRG=new Ext.Panel({  
	    renderTo:'griddiv',
	    border:false,
	    id:'pnmrg',
	    layout:'fit',
	    height:'100%',
	    items:[taskGridPanel]
	})
 })