ExtJs 4.x 学习小记:Ext.TabPanel滚动条及分页栏不在页面最底端的处理
2014-04-03 10:52
555 查看
场景:
动态增加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]
})
})
动态增加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]
})
})
相关文章推荐
- ExtJs 4.x 学习小记:更新数据集Ext.PagingToolbar的start参数重置的处理
- ZP的EXTJS学习笔记(三)——邮箱功能的开发(按钮事件、下拉框、分页、record小图标、整条数据格式处理、定时刷新、record复选删除、分组)
- ExtJs 4.x 学习小记:Ext.PagingToolbar翻页时查询参数丢失的处理
- JDBC(二)大结果集分页,批处理,学习
- EXTJS学习系列提高篇:第二十八篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--分页显示
- ASP.NET 3.5核心编程学习笔记(8):错误处理、页面跟踪
- Extjs4学习中的错误处理
- 百度IFE学习笔记(三)js获取页面内容及后续处理
- ASP.NET 3.5核心编程学习笔记(1):ASP.Net页面请求处理流程
- 百度IFE学习笔记(三)js获取页面内容及后续处理
- extjs实例 ---学习小记
- asp.net实现页面的一般处理程序(CGI)学习笔记
- ExtJS中TabPanel用iframe加载其他完整页面的处理方法
- 一步步学习SPD2010--第十四章节--在Web页面使用控件(1)--处理功能区和标签属性任务窗格
- 基于ExtJs在页面上window再调用Window的事件处理方法
- Extjs4学习中的错误处理
- Discuz! X3.2学习记录:多数据记录页面增加分页控件
- ExtJs + .NET MVC 不分页处理大数据
- 百度IFE学习笔记(三)js获取页面内容及后续处理
- 学习小记 - Flask Web (3) 不使用bootstrap模板完成表单处理