ExtJs 4.x 學習小記:Ext.TabPanel滾動條及分頁欄不在頁面最底端的處理
阿新 • • 發佈:2019-02-11
場景:
動態增加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] }) })