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

来源：互联网发布：pm2 node 编辑：程序博客网时间：2024/05/17 22:17

场景：

动态增加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]}) })

0 0