1. 程式人生 > >ExtJs 4.x 學習小記:Ext.TabPanel滾動條及分頁欄不在頁面最底端的處理

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]
	})
 })